https://virgool.io/feed/@mmdhasnbabaei fa 2026-06-07 10:18:20 https://files.virgool.io/upload/users/1862743/avatar/PMB4tT.jpg?height=120&width=120 https://virgool.io/@mmdhasnbabaei https://virgool.io/@mmdhasnbabaei/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%B3%D8%A7%D8%B9%D8%AA-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-afxo6mhaq1nt تصویر ساعتقرار با کمک html و css و javascript یه همچین چیزی بسازیم که در واقع دوتا ساعته یکیش آنالوگ و دیگری دیجیتالهhtml <!-- // digital clock --> <h1 id=&quotclock&quot> <span id=&quothourespan&quot></span>: <span id=&quotminutespan&quot></span>: <span id=&quotsecondspan&quot></span> </h1> <!-- // analog clock --> <div class=&quotconten&quot> <p class=&quotone&quot></p> <p class=&quottwo&quot></p> <p class=&quotthree&quot></p> <p class=&quotfour&quot></p> <p class=&quotfive&quot></p> <p class=&quotsix&quot></p> <div class=&quotsubcont&quot> <p class=&quotfirsthand&quot></p> <p class=&quotsecondhand&quot></p> <p class=&quotthirdhand&quot></p> <p class=&quotcenter-nail&quot></p> </div> </div> css *{ background-color: black; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } h1{ text-align: center; margin-left: auto; margin-right: auto; color: aqua; margin-top: 35px; border: 2px red solid; width: 41%; box-shadow: 0px 0px 5px 3px; } *{ margin: 0; padding: 0; box-sizing: border-box; } .conten{ background-color: rgb(0 0 0); height: 200px; border-radius: 50%; width: 200px; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; box-shadow: 0px -1px 6px 0px #e7e7e7; } .one{ background-color: aqua; height: 41px; position: absolute; width: 200px; height: 2px; top: 99px; } .two{ background-color: aqua; height: 41px; position: absolute; width: 200px; height: 2px; top: 99px; left: 1px; transform: rotateZ(90deg); } .three,.four,.five,.six{ height: 41px; position: absolute; width: 200px; height: 2px; top: 99px; left: 1px; background-color: rgb(218, 192, 41); } .three{ transform: rotateZ(117deg); } .four{ transform: rotateZ(150deg); } .five{ transform: rotateZ(213deg); } .six{ transform: rotateZ(244deg); } .subcont{ position: absolute; width: 178px; height: 167px; top: 19px; left: 12px; background-color: rgb(0 0 0); border-radius: 50%; } .firsthand{ position: absolute; width: 85px; height: 2px; top: 75px; left: 86px; background-color: rgb(214, 12, 1); transform-origin: 0px bottom; } .secondhand{ position: absolute; width: 60px; height: 2px; top: 75px; left: 86px; background-color: rgb(41 218 87); transform-origin: 0px bottom; } .thirdhand{ position: absolute; width: 54px; height: 4px; top: 75px; left: 86px; background-color: rgb(41 63 218); transform: rotate(106deg); transform-origin: 0px bottom; } .center-nail{ position: absolute; width: 18px; height: 19px; top: 70px; left: 79px; background-color: rgb(5 10 7 / 99%); border-radius: 50%; box-shadow: inset 0px 0px 1px wheat; } js setInterval(callme,10) function callme(){ let date=new Date let second=date.getSeconds() let minute=date.getMinutes() let houre=date.getHours() const hourespan=document.getElementById(&quothourespan&quot) const minutespan=document.getElementById(&quotminutespan&quot) const secondspan=document.getElementById(&quotsecondspan&quot) const helment=document.getElementById(&quotclock&quot) second= second<9 ? &quot0&quot+second:second // minute= minute<9 ? &quot0&quot+minute:minute // houre= houre<9 ? &quot0&quot+houre:houre let amorpm=houre<12 ?&quotam&quot:&quotpm&quot helment=`${houre}: ${minute}: <span id=&quotseccss&quot> ${second} </span> ${amorpm}` } const firsthand=document.querySelector(&quot.firsthand&quot) const secondhand=document.querySelector(&quot.secondhand&quot) const thirdhand=document.querySelector(&quot.thirdhand&quot) let first_hand_degree=6 let second_hand_degree=6 let third_hand_degree=6 setInterval(spinhand,1000); function spinhand(){ if(first_hand_degree<=360){ firsthand.style.transform = `rotate(${first_hand_degree}deg)`; first_hand_degree=first_hand_degree+6 }else if(first_hand_degree>360){ first_hand_degree=100 secondhand.style.transform = `rotate(${second_hand_degree}deg)`; second_hand_degree=second_hand_degree+6 } if(second_hand_degree>360){ const thirdhand=document.querySelector(&quot.thirdhand&quot) second_hand_degree=6 thirdhand.style.transform =`rotate(${third_hand_degree}deg)`; third_hand_degree+=6 } if(third_hand_degree>360){ third_hand_degree=6 } }لینک فایل ها https://github.com/mamadhasn/ANALOG-DIGITAL-CLOCK-WITH-JAVASCRIPT ممدحسن ممدحسن Sat, 19 Nov 2022 15:28:13 +0330 https://virgool.io/@mmdhasnbabaei/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D8%A7%D8%B2%DB%8C-%D8%AD%D8%AF%D8%B3-%D8%B9%D8%AF%D8%AF-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-yirzadiehadt اولین تصویرخوب عکس بالا شکل بازی ماستوقتی حدس غلط می زنیم شکل بالا رو داریمو وقتی هم درست حدس می زنیم این شکل رو داریم و امتیازات هم چه مثبت و چه منفی که بر اساس حدس درست و غلط داده میشه ثپت میشهhtml <div class=&quotconteaner&quot> <h1>GUESS NUMBER</h1> <label>Tell me your number, between 1 to 9</label> <br> <div class=&quotsubcon&quot> <span id=&quotnegetive&quot>-</span> <input type=&quottext&quot id=&quotmynumber&quot placeholder=&quotenter your number&quot> <span id=&quotpositive&quot>+</span> <br> </div> <div class=&quotseocnsubcon&quot> <h3>click me to check your guess</h3> <br> <button id=&quotsubmit&quot>click</button> <button id=&quotretry&quot>&#x21bb</button> </div> </div> <div id=&quottextcompar&quot style=&quottext-align:center;&quot> </div> css .conteaner{ margin-left: auto; margin-right: auto; text-align: center; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: center; } h1{ background-color: black; color: antiquewhite; } label{ background-color: rgb(200, 215, 33); line-height: 41px; font-size: 27px; box-shadow: 0px 2px 3px; } span{ color: rgb(0, 0, 0); } #negetive{ background-color: red; padding: 23px; border-radius: 50%; } #positive{ background-color: green; padding: 23px; border-radius: 50%; } button{ padding: 15px; background-color: black; border-radius: 31%; box-shadow: 1px 1px 3px; color: wheat; } input{ padding: 23px; text-align: center; font-size: larger; } .subcon,.seocnsubcon{ margin-top: 12px; } #textcompar{ font-size: 23px; margin: 20px; } #numone{ background-color: aqua; padding: 16px; border-bottom: 7px solid red; border-radius: 36%; } #numonesecond{ background-color: rgb(242, 255, 0); padding: 16px; border-bottom: 7px solid red; border-radius: 36%; } #rote{ background-color: aqua; padding: 16px; border-bottom: 7px solid red; border-radius: 36%; } #retry{ background-color: black; color: balack; font-size: 21px; border-radius: 50%; }js const submit=document.getElementById(&quotsubmit&quot) let negetive_scover=1 let posiotive_scover=1 submit.addEventListener(&quotclick&quot,e=>{ const generatnumber=Math.floor(Math.random()*10) const mynumber=document.getElementById(&quotmynumber&quot).value const error=document.getElementById(&quotmynumber&quot) error.value=&quot&quot if( negetive_scover>7){ alert(&quotyou lose&quot) } if(mynumber>=0 && mynumber<=9){ if(generatnumber==mynumber){ document.getElementById(&quottextcompar&quot)=` your number is <span id=&quotrote&quot>${mynumber}</span> and mine is <span id=&quotrote&quot> ${generatnumber} :)<span>` const positive=document.getElementById(&quotpositive&quot) positive=posiotive_scover return posiotive_scover=posiotive_scover+1 console.log(mynumber); }else if(generatnumber!=mynumber){ document.getElementById(&quottextcompar&quot)=` your number is <span id=&quotnumone&quot>${mynumber}</span> and mine is <span id=&quotnumonesecond&quot> ${generatnumber}:(</span>` const negetive=document.getElementById(&quotnegetive&quot) negetive=negetive_scover return negetive_scover=negetive_scover+1 } }else{ alert(&quotplease enter number between 1 to 9&quot) } const retry=document.getElementById(&quotretry&quot) retry.addEventListener(&quotclick&quot,e=>{ const positive=document.getElementById(&quotpositive&quot) const negetive=document.getElementById(&quotnegetive&quot) const textcompar=document.getElementById(&quottextcompar&quot) positive=&quot+&quot negetive=&quot-&quot textcompar=&quot&quot})لینک دانلود فایل کد ها https://github.com/mamadhasn/GUESS-NUMBER-game-with-javascript ممدحسن ممدحسن Thu, 17 Nov 2022 14:18:25 +0330 https://virgool.io/@mmdhasnbabaei/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AAgenerate-randome-quote-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-yaa8njitvl3y یه همچین چیزی که با زدن رکمه جنریت برامون گوت درست کنهhtml <div id=&quotconteaner&quot> <h1> GENERATE RANDOM QUOTE </h1> <button id=&quotgenerate&quot>Generate quote</button> <div id=&quottextplace&quot></div> </div> css h1{ background-color: #33d30b; box-shadow: inset -1px -3px 3px; border-radius: 4px; } #conteaner{ display: flex; flex-direction: column; align-content: space-around; align-items: center; justify-content: center; } #generate{ background-color: aqua; padding: 17px; font-size:x-large ; border: none; box-shadow: inset -3px -2px 3px; border-radius: 11px; } #textplace{ background-color: #b79898; margin-top: 10px; text-align: center; font-size: 25px; box-shadow: inset -2px -3px 3px; font-size: x-large; display: flex; flex-direction: column; align-items: center; border-radius: 19px; } span{ background-color: #b79898; margin: -28px; padding: 6px; position: absolute; top: 64%; box-shadow: inset -1px -2px 3px; border-radius: 12px; } js const quotes=[ { id:1, quote:&quotThe greatest glory in living lies not in never falling, but in rising every time we fall.&quot, who:&quot -Nelson Mandela&quot }, { id:2, quote:&quotThe way to get started is to quit talking and begin doing.&quot, who:&quot -Walt Disney&quot}, {id:3, quote:&quotThe future belongs to those who believe in the beauty of their dreams. &quot, who:&quot --Eleanor Roosevelt&quot },{ id:4, quote: &quotSpread love everywhere you go. Let no one ever come to you without leaving happier.&quot, who:&quot -Mother Teresa&quot }, { id:5, quote:&quotI never dreamed about success, I worked for it.&quot , who:&quot -Estee Lauder&quot }, { id:6, quote:&quotSuccess seems to be connected with action. Successful people keep moving. They make mistakes but they don't quit.&quot , who:&quot -Conrad Hilton&quot }, { id:7, quote: &quotThere are no secrets to success. It is the result of preparation, hard work, and learning from failure.&quot, who:&quot -Colin Powell&quot }, ] const generate=document.getElementById(&quotgenerate&quot) generate.addEventListener(&quotclick&quot,e=>{ const random=Math.floor(Math.random()*7)+1 const textplace=document.getElementById(&quottextplace&quot) textplace.style.padding=&quot79px&quot const filterbyrandom= quotes.filter((w)=>{ return w.id==random }) filterbyrandom.forEach(e => { const textplace=document.getElementById(&quottextplace&quot) textplace=`&quot${e.quote}&quot<br> <span>${e.who}</span>` }); })لینک دانلود فایل کد ها https://github.com/mamadhasn/GENERATE-RANDOM-QUOTE ممدحسن ممدحسن Thu, 17 Nov 2022 13:46:31 +0330 https://virgool.io/@mmdhasnbabaei/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D9%85%D8%A7%D8%B4%DB%8C%D9%86-%D8%AD%D8%B3%D8%A7%D8%A8-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-w0w53q41wiha عکس اولخوب شکل بالا ماشین حساب ما رو نشون میده که در عین سادگی تقریبا کنترول شده و بی عیب کار می کنه.عکس دومبریم به قسمت کد هاhtml <div class=&quotconteaner&quot> <div id=&quotshownumer&quot> <div id=&quotsunelespans&quot> <span id=&quotyek&quot></span> <span id=&quotdoo&quot></span> <span id=&quotsee&quot></span> </div> </div> <button id=&quotplus&quot>+</button> <button id=&quotmines&quot>-</button> <button id=&quotmultiple&quot>x</button> <button id=&quotdivision&quot>/</button> <button id=&quotclean&quot>c</button> <button id=&quottwo&quot>2</button> <button id=&quotthree&quot>3</button> <button id=&quotfour&quot>4</button> <button id=&quotfive&quot>5</button> <button id=&quotsix&quot>6</button> <button id=&quotzero&quot>0</button> <button id=&quotone&quot>1</button> <button id=&quotseven&quot>7</button> <button id=&quotegiht&quot>8</button> <button id=&quotnine&quot>9</button> <button id=&quotequal&quot>=</button> css *{ font-size: xx-large;} .conteaner{ width: 50%; height: 500px; display: grid; grid-template-columns: 50px 50px 50px 50px 50px; gap: 20px; grid-auto-rows: 100px; margin-right: auto; margin-left: auto; } #shownumer{ background-color: rgb(3, 225, 66); grid-column: 1 / -1; grid-row: 1; font-size: 60px; text-align: center; } span{ font-size: 50px; } button#equal{ background-color: rgb(247, 0, 0); grid-column: 1 / -1; grid-row: auto;} button:not(#equal){ border-radius: 50%; background-color: black; color: aliceblue; } #sunelespans{ text-align: center; } #plus{ background-color: #af1a1aa1!important } #mines{ background-color: rgb(18 130 219) !important; } #multiple{ background-color: rgb(63, 35, 173) !important; } #division{ background-color: rgb(156, 93, 157) !important; } #clean{ background-color: rgb(199, 122, 22) !important; } قسمت جاوااسکریپتیشjs const spanone=document.querySelector(&quot#yek&quot) const spanthree= document.querySelector(&quot#see&quot) const spancondition=document.querySelector(&quot#doo&quot) const one=document.getElementById(&quotone&quot) one.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(1) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(1) } }) const two=document.getElementById(&quottwo&quot) two.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(2) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(2) } }) const three=document.getElementById(&quotthree&quot) three.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(3) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(3) } }) const four=document.getElementById(&quotfour&quot) four.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(4) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(4) } }) const five=document.getElementById(&quotfive&quot) five.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(5) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(5) } }) const six=document.getElementById(&quotsix&quot) six.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(6) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(6) } }) const seven=document.getElementById(&quotseven&quot) seven.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(7) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(7) } }) const eight=document.getElementById(&quotegiht&quot) eight.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(8) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(8) } }) const nine=document.getElementById(&quotnine&quot) nine.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(9) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(9) } }) const zero=document.getElementById(&quotzero&quot) zero.addEventListener(&quotclick&quot,e=>{ if(spancondition.textContent==&quot&quot){ yek.append(0) } else if(!spancondition.textContent==&quot&quot){ spanthree.append(0) } }) const plus=document.querySelector(&quot#plus&quot) plus.addEventListener(&quotclick&quot,e=>{ if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){ document.querySelector(&quot#doo&quot)=plus.textContent } else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && !spanthree.textContent==&quot&quot){ equall() document.querySelector(&quot#doo&quot)=plus.textContent } else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){ document.querySelector(&quot#doo&quot)=plus.textContent } }) const mines=document.querySelector(&quot#mines&quot) mines.addEventListener(&quotclick&quot,e=>{ if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){ document.querySelector(&quot#doo&quot)=mines.textContent } else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && !spanthree.textContent==&quot&quot){ equall() document.querySelector(&quot#doo&quot)=mines.textContent }else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){ document.querySelector(&quot#doo&quot)=mines.textContent } }) const multiple=document.querySelector(&quot#multiple&quot) multiple.addEventListener(&quotclick&quot,e=>{ if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){ document.querySelector(&quot#doo&quot)=multiple.textContent } else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && !spanthree.textContent==&quot&quot){ equall() document.querySelector(&quot#doo&quot)=multiple.textContent }else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){ document.querySelector(&quot#doo&quot)=multiple.textContent } }) const division=document.querySelector(&quot#division&quot) division.addEventListener(&quotclick&quot,e=>{ if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){ document.querySelector(&quot#doo&quot)=division.textContent } else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && !spanthree.textContent==&quot&quot){ equall() document.querySelector(&quot#doo&quot)=division.textContent }else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){ document.querySelector(&quot#doo&quot)=division.textContent } }) function equall(){ const shownumer=document.querySelector(&quot#shownumer&quot) let firstvalue=document.querySelector(&quot#yek&quot) let firstvalueu=parseInt(firstvalue.textContent) const secondvalue=document.querySelector(&quot#doo&quot) let secondvalueu=secondvalue.textContent let thirdvalue=document.querySelector(&quot#see&quot) let thirdvalueu=parseInt(thirdvalue.textContent) switch(secondvalueu){ case &quot+&quot :firstvalue=firstvalueu+thirdvalueu , thirdvalue=&quot&quot,secondvalue=&quot&quot break; case &quot-&quot :firstvalue=firstvalueu-thirdvalueu , thirdvalue=&quot&quot,secondvalue=&quot&quot break; case &quotx&quot :firstvalue=firstvalueu*thirdvalueu , thirdvalue=&quot&quot,secondvalue=&quot&quot break; case &quot/&quot :firstvalue=firstvalueu/thirdvalueu , thirdvalue=&quot&quot,secondvalue=&quot&quot break; } } const equal=document.querySelector(&quot#equal&quot) equal.addEventListener(&quotclick&quot,e=>{ equall()}) const clean=document.querySelector(&quot#clean&quot) clean.addEventListener(&quotclick&quot,e=>{ let firstvalue=document.querySelector(&quot#yek&quot) const secondvalue=document.querySelector(&quot#doo&quot) let thirdvalue=document.querySelector(&quot#see&quot) firstvalue=&quot&quot secondvalue=&quot&quot thirdvalue=&quot&quot }) https://github.com/mamadhasn/-calculator-with-js ccc ممدحسن ممدحسن Thu, 17 Nov 2022 00:30:54 +0330 https://virgool.io/@mmdhasnbabaei/%D8%B3%D8%A7%D8%AE%D8%AA%D9%86-to-do-list-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-kl3mt1dh7zwv یه همچین چیزی قراره بسازیم که وقتی کار رو از لیست تیک می زنیم به شکل پائین نمایش داده بشه و آیکن حذف هم فعال بشه.html <div id=&quotconteaner&quot> <input type=&quottext&quot id=&quotadd-work&quot placeholder=&quotNAME...&quot> <button id=&quotbtn&quot>+ </button> </div> <div id=&quotlistcont&quot></div> قسمت csscss #conteaner,#listcont{ display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-end; justify-content: center; align-items: baseline; } #listcont{ display: flex; align-content: space-between; justify-content: space-evenly; flex-direction: column; align-items: baseline; } #add-work{ width: 60%; padding: 1rem; } button{ width: 10%; padding: 1rem; font-size: 14px; font-weight: 900; background-color: green; } span{ font-size: 30px;} #listcont p{ width: 100%; background-color: rgb(197 213 202); color: rgb(0, 0, 0); display: flex; align-content: space-around; justify-content: space-between } a{ background-color: #000000; color: aliceblue; font-size: 29px; border-radius: 102%; } span{ margin-right: auto; }قسمت جاوااسکریپتjs //'گرفتن المنت ها' const getvalue=document.getElementById(&quotadd-work&quot) const btn=document.getElementById(&quotbtn&quot) const listcont=document.getElementById(&quotlistcont&quot) //چون اول باید المنت ساخته بشه و بعد ما بتونیم بگیریمش این یعنی ویژگی تک رشته ای // جاوااسکریپت که به //Asynchronous Javascript //معروفه و برای حل این مشکل می تونیم از //callback //promise //async await //استفاده کنیم function first( callback){ // ساختن المنت ها در جاوااسکریپت و اضافه کردن آن به دام btn.addEventListener(&quotclick&quot,e=>{ const deletel=document.createElement(&quota&quot) deletel.textContent='x' const elementp=document.createElement(&quotp&quot) const inpu=document.createElement(&quotinput&quot) const tags=document.createElement(&quotspan&quot) inpu.setAttribute(&quottype&quot,&quotcheckbox&quot) elementp.append(inpu) elementp.append(tags) tags+=getvalue.value elementp.append( deletel) listcont.append(elementp) getvalue.value=&quot&quot callback() }) } //تابع دوم که باید بعد تابع اول اجرا بشه و بتونه المنت های رو که میخواهیم رو بگیره function two(){ const taker=document.querySelectorAll('input[type=checkbox]') const span=document.querySelectorAll(&quotspan&quot) const alla=document.querySelectorAll(&quota&quot) // چون آرایه ای از المنت ها رامی گیریم به همین خاطر از فور ایچ //استفاده می کنیم taker.forEach(e=>{ e.addEventListener(&quotchange&quot,e=>{ //دسترسی به والد وبرادر و خواهر المنت ها const feed=e.target.nextSibling const parentelem=e.target.parentElement const aelem=e.target.nextSibling.nextSibling if(e.target.checked){ aelem.style.background=&quot#FF0000&quot aelem.style.borderColor=&quotblack&quot parentelem.style.background=&quot#33333&quot feed.style.textDecoration=&quotline-through&quot }else{ parentelem.style.background=&quot&quot feed.style.color=&quot&quot feed.style.textDecoration=&quot&quot aelem.style.background=&quot&quot console.log(e.target.checked); } }) }) alla.forEach(e=>{ e.addEventListener(&quotclick&quot,e=>{ const checkfordelet=e.target.previousSibling.previousSibling if (checkfordelet.checked) { const e_target=e.target.parentElement e_target.remove() }else if(!checkfordelet.checked){ return false } }) }) } //در نهایت فراخوانی تابع اول با کال بک تابع دوم first(two)کد ها رو می تونید از لینک زیر دانلود کنید https://github.com/mamadhasn/TODOLIST ممدحسن ممدحسن Fri, 11 Nov 2022 14:31:14 +0330 https://virgool.io/@mmdhasnbabaei/%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88-%D8%AD%D8%B0%D9%81-%DA%A9%D8%B1%D8%AF%D9%86-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-x2awfn0uyobm ADD,DELETE,SELECTقرار یه همچین چیزی بسازیمHTML <h1> ADD ,SELECT, DELETE </h1> <div id=&quotcontn&quot> <div class=&quotsubone&quot> <!-- creat two inputs to take product's name and price --> <label for=&quotproduct&quot>name:</label> <input type=&quottext&quot id=&quotproduct&quot placeholder=&quotname of product&quot><br> <!-- //creat checkbox to add product existence --> <label for=&quotprice&quot>price:</label> <input type=&quottext&quot id=&quotprice&quot placeholder=&quotprice of product&quot> <input type=&quotsubmit&quot id=&quotsubmit&quot> <!-- empety conteaner for add element --> <div id=&quotsubconteaner&quot> </div> </div> <div id=&quotsecondsub&quot> <!-- //select all element to remove --> <label for=&quotselect-ALL_remove&quot>SELECT ALL</label> <input type=&quotcheckbox&quot id=&quotselect-ALL_remove&quot name=&quotselect-ALL_remove&quot> <span>and</span> <label for=&quotremove-all&quot>remove all</label> <button id=&quotremove-all&quot>DELETE ALL</button> </div> CSS *{ box-sizing: border-box; } input[type=&quottext&quot]{ padding: 9px; margin-top:13px; } input[type=&quotsearch&quot]{ padding: 9px; margin-top:13px; width: 100%; margin-left: -68px; } input[type=&quotsubmit&quot]{ padding: 9px; margcolor: aliceblue; in-top:13px; background-color: black; } #contn{ display: flex; align-content: space-between; justify-content: space-between; align-items: baseline; flex-direction: column-reverse; font-size: larger; } .subone{ flex:4 ; } .subtwo{ flex: 6; } #subconteaner{ background-color: rgb(255, 255, 255); } input[type=&quottext&quot]{ border-radius: 20px; border: 3px solid navy; width: 300px; line-height: 2rem; font-size: 20px; } #remove-all{ color: wheat; padding: 12px; border-radius: 23px; background-color: black; } #remove-all:hover{ background-color: red; color: aliceblue; } #subconteaner button{ padding: 13px; background-color: #783f3f; color: aliceblue; margin-left: 12px; border-radius: 50%; box-shadow: 0px 0px 10px 0px #563c3c; border: none; } #subconteaner button:hover{ background-color: red; color: azure; } h1{ text-align: center; background-color: coral; }js // مرحله اول گرفتن المنت ها const product=document.getElementById(&quotproduct&quot) const price=document.getElementById(&quotprice&quot) const subconteaner=document.getElementById(&quotsubconteaner&quot) const submit=document.getElementById(&quotsubmit&quot) const select_toremove=document.getElementById(&quotselect-ALL_remove&quot) const remove_all_select=document.getElementById(&quotremove-all&quot) // تعریف آریه خالی برای پوش کردن ولیو ها let myarry=[]; // اد گردن ایونت لیسنر به باتن سابمیت برای پوش کردن submit.addEventListener(&quotclick&quot,e=>{ myarry.push( { name:product.value, price:price.value, } ) // پیمایش آرایه و نمایش ولیو ها document.getElementById(&quotsubconteaner&quot)=&quot&quot myarry.forEach(e=>{ const elemnt=document.createElement(&quotp&quot) const span=document.createElement(&quotbutton&quot) const cheky=document.createElement(&quotinput&quot) const linky=document.createElement(&quota&quot) cheky.setAttribute(&quottype&quot,&quotcheckbox&quot) span.textContent=&quotx&quot linky.setAttribute(&quothref&quot,&quotwww.school.ir&quot) elemnt.append(cheky) elemnt.append(linky) linky+=` ${e.name} is ${e.price}$ ` elemnt.append(span) document.getElementById(&quotsubconteaner&quot).append(elemnt) // حذف المنمت ها span.addEventListener(&quotclick&quot,e=>{ elemnt.remove() }) // حذف کلی المنت ها باسلکت اُل select_toremove.addEventListener(&quotchange&quot,e=>{ if(e.target.checked){ cheky.checked=true }else{ cheky.checked=false } }) remove_all_select.addEventListener(&quotclick&quot,e=>{ if(cheky.checked){ elemnt.remove() select_toremove.checked=false } }) }) product.value=&quot&quot price.value=&quot&quot })لینک فایل ها https://github.com/mamadhasn/ADD-SELECT-DELETE ممدحسن ممدحسن Thu, 03 Nov 2022 11:04:05 +0330 https://virgool.io/@mmdhasnbabaei/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%DB%8C%DA%A9-%D8%AA%D8%A7%DB%8C%D9%85%D8%B1-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-kezuxquiijx4 شکل تایمرقرار یک تایمر به شکل بالا بسازیم:اول فرض کنید معلم ورزش هستین و قرار از بچه ها امتحان دویدن بگیرین ، حالا با استفاده از تایمر بالا اسم هاشونو در کادر مینویسین بعد دکمه استارت رو میزنین ، بعد اتمام دویدن هر کدوم از دانش آموزا دکمه فینیش رو میزنین و سر آخر تایمشون رو با دکمه رکورد در قسمت پا ئین ثپت می کنین و در مرحله پایانی تایم رو ری ست می کنین و برا دانش آموز بعدی این کار رو انجام میدین.حالا که همه دویدن باید بتونیم سه نفر اول رو که تایمشون از بقیه بهتر رو پیدا کنیم خوب اینجا هم دکمه سورت رو می زنیم و تمام(خیلی راحت،آسون،بی دردسر و بی قلم و خودکار و .... :)داستان تموم شد بریم سراغ قسمت جالب قضیه :html <div id=&quotcont&quot> <h1 id=&quotgo&quot>00:00:00</h1> <div id=&quotinpu&quot> <label for=&quotesmesh&quot>NAME OF RUNNER</label><br> <input type=&quottext&quot id=&quotesmesh&quot placeholder=&quotenter runner name&quot><br> </div> <div id=&quotbtu&quot> <button id=&quotstart&quot>start</button> <button id=&quotfinish&quot>finish</button> <button id=&quotregister&quot>record</button> <button id=&quotreset&quot>reset</button> </div> <button id=&quotSORT&quot>SORT RUNNER BY THEIR TIME</button> <div id=&quotadd&quot></div> </div>css .cont{ text-align: center; display: flex; flex-direction: column; } h1{ background-color:#07d30a ; display: block; font-size: 90px; } @media screen and (max-width: 480px) { body { background-color: lightgreen; } h1{ background-color:#07d30a ; display: block; font-size: 34px; }} #btu{ margin-top: 3rem; } button{ padding: 20px; background-color: black; color: aliceblue; border-radius: 12px; } span{ line-height: 12px; background-color: aqua; } label{ background-color: rgb(0 0 0); color: rgb(36 209 15); font-weight: bold; font-size: 30px; } input{ padding: 20px; } li{ list-style-type: auto; line-height: 35px; margin-top: 20px; background-color: #07d30a; }javascript //گرفتن المنت های مدنظر const esmesh=document.getElementById(&quotesmesh&quot) const start=document.getElementById(&quotstart&quot) const register=document.getElementById(&quotregister&quot) const finish=document.getElementById(&quotfinish&quot) const reset=document.getElementById(&quotreset&quot) const hh=document.getElementById(&quotgo&quot) const sort=document.getElementById(&quotSORT&quot) //تعریف آرایه خالی برای پوش کردن اسم و تایم دونده ها let all_Arry=[]; let mili=0; let sec=0; let min=0 let hor=0; let every; // استفاده از ایونت ها start.addEventListener(&quotclick&quot,e=>{ every= setInterval(() => { timer(); }, 10); }) register.addEventListener(&quotclick&quot,e=>{ const elem=document.createElement(&quotli&quot) elem.textContent=`${esmesh.value} time is${hor}:${min}:${sec}:${mili} ` document.getElementById(&quotadd&quot).append(elem) all_Arry.push({ name:esmesh.value, time:parseInt(hor*24*60*60*1000+min*60*1000+sec*1000+mili) }) console.log(all_Arry); esmesh.value=&quot&quot }) finish.addEventListener(&quotclick&quot,e=>{ clearInterval(every) }) reset.addEventListener(&quotclick&quot,e=>{ sec=0; min=0 hor=0; hh=`00:00:00` }) function timer(){ mili+=10; if(mili==1000){ sec++; sec=sec<10 ? &quot0&quot+sec:sec return mili=0 } if(sec===60){ min++; min=min<10 ? &quot0&quot+min:min return sec=0 } if(min===60){ hor++; hor=hor<10 ? &quot0&quot+hor:hor return min=0 } hh=`${hor}:${min}:${sec}:${mili}` } sort.addEventListener(&quotclick&quot,e=>{ let sorted= all_Arry.sort((a,b)=>{ return b.time-a.time }) const dele=document.getElementById(&quotadd&quot) dele.textContent=&quot&quot sorted.forEach(e=>{ let ms = e.time let sanie= Math.floor((ms/1000/60) << 0) let dagig = Math.floor((ms/1000) % 60); const elem=document.createElement(&quotli&quot) elem.textContent=`${e.name} time is ${dagig}min and ${sanie}sec ` document.getElementById(&quotadd&quot).append(elem) }) })فایل ها رو میتونید از لینک زیر دانلود کنید https://github.com/mamadhasn/RUNNER-TIMER در پست بعدی انشالله به طور کامل به توضیح کد ها می پردازم :) ممدحسن ممدحسن Sat, 29 Oct 2022 19:07:53 +0330