coding with ☕️

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div class="tabsPanel">
      <!-- Меню табов -->
      <ul class="tabsLinks">
        <li class="tabsItem active"><a href="#" class="tabsLink">Часы</a></li>
        <li class="tabsItem">
          <a href="https://learn.javascript.ru/" class="tabsLink"
            >Секундомер
            <!-- span для показа запуска секундомера
                    Принимает на себя класы работы:
                    active - Секундомер запущен
                    active_clear - Секундомер остановлен но данные не сброшены
                    -->
            <span class="tabsLink__span"></span>
          </a>
        </li>
      </ul>
      <!-- Все табы -->
      <div class="tabsContent">
        <!-- Стрелочные часы -->
        <div class="clock tabsContentItem active">
          <div class="arrowClock">
            <!-- Часы-->
            <div class="arrowClockNumber">
              <div class="arrowClockNumber__num arrowClockNumber__num_12">
                12
              </div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_1"></div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_2"></div>
              <div class="arrowClockNumber__num arrowClockNumber__num_3">3</div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_4"></div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_5"></div>
              <div class="arrowClockNumber__num arrowClockNumber__num_6">6</div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_7"></div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_8"></div>
              <div class="arrowClockNumber__num arrowClockNumber__num_9">9</div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_10"></div>
              <div class="arrowClockNumber__arr arrowClockNumber__arr_11"></div>
            </div>

            <!-- Стрелки  -->

            <div class="s"></div>
            <!-- Секундная -->
            <div class="m"></div>
            <!-- Минутная -->
            <div class="h"></div>
            <!-- Часовая -->
          </div>
          <div class="numberClock">
            <!-- Вывод времени в цифрах -->
            <div class="hours">00</div>
            <div class="minutes">00</div>
          </div>
        </div>
        <div class="stopwatch tabsContentItem">
          <div class="stopwatch__clock">
            <div class="stopwatch__clock-description">
              <!-- Час -->
              <div class="stopwatch__hours">0</div>
              Час.
            </div>
            <div class="stopwatch__clock-description">
              <!-- Минуты -->
              <div class="stopwatch__minutes">0</div>
              Мин.
            </div>
            <div class="stopwatch__clock-description">
              <!-- Секунды -->
              <div class="stopwatch__seconds">0</div>
              Сек.
            </div>
          </div>
          <!-- Кнопка запуска секундомера -->
          <button class="stopwatch__btn">start</button>
          <button class="continueWatch__btn">clear</button>
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

learn.javascript.ru

Современный учебник JavaScript

Современный учебник JavaScript, начиная с основ, включающий в себя много тонкостей и фишек JavaScript/DOM.

19 viewsedited 09:56

coding with ☕️

margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
body {
    background: #2c2f38;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
}
.tabsPanel {
    width: 400px;
    height: 600px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    background: #22272d;
}
.tabsLinks {
    display: flex;
    background: #191d22;
}
.tabsItem {
    flex-grow: 1;
    display: flex;
}
.tabsLink {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 3px solid #2c2f38;
    position: relative;
}
.tabsItem.active .tabsLink {
    border-bottom-color: #fff;
}
.tabsContent {
    flex-grow: 1;
    position: relative;
}
.clock, .stopwatch {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px 0;
}
.tabsContentItem {
    z-index: 0;
    opacity: 0;
    transition: 0.5s;
    position: absolute;
    top: 0;
}
.tabsContentItem.active {
    z-index: 1;
    opacity: 1;
}
.tabsLink__span {
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    right: 10px;
    position: absolute;
    transition: 0.5s;
}
.tabsLink__span.active {
    display: block;
}
.tabsLink__span.active_clear {
    display: block;
    background: red;
}
.arrowClock {
    --position: 15px;
    width: 250px;
    height: 250px;
    background: #434a53;
    border-radius: 50%;
    margin-bottom: 90px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.h {
    width: 2px;
    height: 100%;
    position: absolute;
}
.h::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 35%;
    background: #0b0c0e;
    top: calc(55% - 35% + 6px);
}
.m {
    width: 2px;
    height: 100%;
    position: absolute;
}
.m::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 45%;
    background: #22272d;
    top: calc(10% + 6px);
}
.s {
    width: 2px;
    height: 100%;
    position: absolute;
}
.s::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 65%;
    background: #fff;
    top: 6px;
}
.arrowClockNumber {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.arrowClockNumber__num {
    color: #fff;
    font-size: 22px;
    position: absolute;
}
.arrowClockNumber__num_12 {
    top: var(--position);
}
.arrowClockNumber__arr {
    position: absolute;
    width: 3px;
    height: 100%;
}
.arrowClockNumber__arr::before {
    content: '';
    display: block;
    height: 20px;
    background: #fff;
    width: 100%;
    margin-top: 8px;
}
.arrowClockNumber__arr_1 {
    transform: rotate(30deg);
}
.arrowClockNumber__arr_2 {
    transform: rotate(60deg);
}
.arrowClockNumber__arr_4 {
    transform: rotate(120deg);
}
.arrowClockNumber__arr_5 {
    transform: rotate(150deg);
}
.arrowClockNumber__arr_7 {
    transform: rotate(210deg);
}
.arrowClockNumber__arr_8 {
    transform: rotate(240deg);
}
.arrowClockNumber__arr_10 {
    transform: rotate(300deg);
}
.arrowClockNumber__arr_11 {
    transform: rotate(330deg);
}
.arrowClockNumber__num_3 {
    right: calc(var(--position) + 3px);
}
.arrowClockNumber__num_6 {
    bottom: var(--position);
}
.arrowClockNumber__num_9 {
    left: calc(var(--position) + 3px);
}

20 viewsedited 09:57

coding with ☕️

display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.numberClock::before, .numberClock::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: block;
    position: absolute;
    animation: opacity 1s infinite;
}
.numberClock::before {
    top: 13px
}
.numberClock::after {
    bottom: 13px;
}
.hours, .minutes, .stopwatch__hours, .stopwatch__minutes, .stopwatch__seconds {
    padding: 10px 15px;
    background: #434a53;
    color: #fff;
    font-size: 25px;
    margin: 0 10px;
    border-radius: 6px;
}
.stopwatch__hours, .stopwatch__minutes, .stopwatch__seconds {
    width: 58px;
    text-align: center;
    margin: 0 0 10px;
}
.stopwatch__clock-description {
    padding: 5px 5px 10px;  
    text-align: center;
    color: #fff;
    background: #191d22;
    border-radius: 6px;
    text-transform: uppercase;
    margin: 0 5px;
}
.stopwatch__clock {
    display: flex;
    margin-bottom: 50px;
}
.stopwatch__btn {
    padding: 10px 15px;
    background: #fff;
    border-radius: 30px;
    border: none;
    font-size: 18px;
    text-transform: uppercase;
    color: #191d22;
    cursor: pointer;
    outline: none;
}

/* Добавляем keyframe на уроке*/

@keyframes opacity {
    0% {
       transform: scale(1);
    }
    50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}


.continueWatch__btn{
    margin-top: 250px;
    padding: 10px 15px;
    background: red;
    border-radius: 30px;
    border: none;
    font-size: 18px;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
    outline: none;
    position: absolute;
    display: none;
}

20 viewsedited 09:57

coding with ☕️

const hour = document.querySelector(".h"),
  min = document.querySelector(".m"),
  sec = document.querySelector(".s"),
  hourNum = document.querySelector(".hours"),
  minNum = document.querySelector(".minutes");

function clock() {
  /* new Date() - Global object kompyuterdan hozirgi vaqtni oladi
    getSeconds() - Kompyuterdan sekuntni olib beradi
    getMinutes() - Kompyuterdan minutni olib beradi
    getHours() - Kompyuterdan soatni olib beradi
    console.log(new Date().getHours());
    console.log(new Date);
 */
  let time = new Date(),
    second = time.getSeconds(),
    minutes = time.getMinutes(),
    hours = time.getHours();
  sec.style.transform = rotate(${second * 6}deg);
  min.style.transform = rotate(${minutes * 6}deg);
  hour.style.transform = rotate(${hours * 30}deg);

  setTimeout(() => clock(), 1000);

  hourNum.innerHTML = hours < 10 ? "0" + hours : hours;
  minNum.innerHTML = minutes < 10 ? "0" + minutes : minutes;
}
clock();
const links = document.querySelectorAll(".tabsItem"),
  tabs = document.querySelectorAll(".tabsContentItem");
for (let i = 0; i < links.length; i++) {
  links[i].addEventListener("click", (e) => {
    e.preventDefault();
    for (let j = 0; j < links.length; j++) {
      links[j].classList.remove("active");
      tabs[j].classList.remove("active");
    }
    tabs[i].classList.add("active");
    links[i].classList.add("active");
  });
}
const stopHour = document.querySelector(".stopwatch__hours"),
  stopMin = document.querySelector(".stopwatch__minutes"),
  stopSec = document.querySelector(".stopwatch__seconds"),
  switchStop = document.querySelector(".stopwatch__btn"),
  stopClock = document.querySelector(".tabsLink__span"),
  clearBtn = document.querySelector(".continueWatch__btn");

switchStop.addEventListener("click", () => {
  if (switchStop.innerHTML == "start") {
    switchStop.innerHTML = "stop";
    stopClock.classList.add("active");
  } else if (switchStop.innerHTML == "stop") {
    switchStop.innerHTML = "contuine";
    clearBtn.style.display = "block";
    stopClock.classList.remove("active");
    stopClock.classList.add("active_clear");
  }else if(switchStop.innerHTML == 'contuine'){
    clearBtn.style.display ='none'
    switchStop.innerHTML = 'stop'
  }
  clearBtn.addEventListener("click", function(){
    switchStop.innerHTML = 'start'
    clearBtn.style.display="none"
    stopSec.innerHTML=0
    stopMin.innerHTML=0
    stopHour.innerHTML=0
    stopClock.classList.remove('active_clear')
  })
   
});

function processAction() {
  if(switchStop.innerHTML == 'stop') {
      stopSec.innerHTML++
  }if(stopSec.innerHTML>=60) {
      stopSec.innerHTML = 0
      stopMin.innerHTML++
  }if(stopMin.innerHTML>=60) {
      stopMin.innerHTML = 0
      stopHour.innerHTML++
  }if(stopHour.innerHTML>=24) {
      stopHour.innerHTML = 0
  }if(switchStop.innerHTML == 'start') {
      stopHour.innerHTML = 0
      stopMin.innerHTML = 0
      stopSec.innerHTML = 0
  }

  
  setTimeout(()=> {
      processAction()
  }, 16);
}
processAction()

30 viewsedited 09:58

coding with ☕️

https://fotimadev.github.io/Clock/

28 views09:59

coding with ☕️

https://youtu.be/vol1qJB2waE?si=WKRqpgKeSpTVoh6_

YouTube

Zuckerberg DROPS AI BOMBSHELL: The End Of Software Engineers

Join my AI Academy - https://www.skool.com/postagiprepardness
🐤 Follow Me on Twitter https://twitter.com/TheAiGrid
🌐 Checkout My website - https://theaigrid.com/

Links From Todays Video:
00:00 - Intro: AI in 2025
00:35 - Mark Zuckerberg on AI Coders
01:42…

28 views12:27

coding with ☕️

0:17

This media is not supported in your browser

26 views09:07

Dribbble - Discover the World’s Top Designers & Creative Professionals

Find Top Designers & Creative Professionals on Dribbble. We are where designers gain inspiration, feedback, community, and jobs. Your best resource to discover and connect with designers worldwide.

25 views12:13

coding with ☕️

https://bb.agency/services/?utm_source=dribble&utm_medium=boosted&utm_campaign=bb+agency

BB Agency

BB Agency - Services

BB Agency empowers businesses to lead their digital journeys with solutions that align strategy, design, and technology, building impactful brands and websites.

27 views12:31

coding with ☕️

https://x.com/elonmusk/status/1889386802307539405?t=h46XPDsuhcNw83XE0c3JDA&s=19

27 views13:03

coding with ☕️

if(btns[1].classList.contains('red')){
    console.log('Element conatin red class')
}

21 views11:05

coding with ☕️

contains class berish - konsolda chiqarish uchun tekshiruvchi class htmlda berlgan bo'lsa chiqarish

22 views11:08

coding with ☕️

btns[0].addEventListener('click', () => {
        if(btns[0].classList.contains('red')){
            btns[0].classList.remove('red')
        }else{
            btns[0].classList.add('red')
        }
    })

24 views11:18

coding with ☕️

<div class="wrapper">
      <button class="red">1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
    </div>

25 views11:18

coding with ☕️

btns[0].addEventListener('click', () => { if(btns[0].classList.contains('red')){ btns[0].classList.remove('red') }else{ btns[0].classList.add('red') } })

Agar classda red berilgan bo'lsa "red" remove qil agar classa berilmagan bo'lsa else yordamida add qil "red" ni

26 viewsedited 11:22

coding with ☕️

btns[1].classList.toggle('red')

22 views13:04

coding with ☕️

Toggle metodikasi bilan https://t.me/fachinformatiker_nummereins/351 4 qator kodni qisqartmasi

Fachinformatiker

btns[0].addEventListener('click', () => {
if(btns[0].classList.contains('red')){
btns[0].classList.remove('red')
}else{
btns[0].classList.add('red')
}
})

26 views13:05

coding with ☕️

/* ClassList va Delegatsiya */

25 views14:04

coding with ☕️

const btns = document.querySelectorAll('button'),                 /* METHOD 1 */
wrapper = document.querySelector('.wrapper')

25 views14:05

coding with ☕️

btns.forEach(item => {
    item.addEventListener('click', () => {                         /* METHOD 2 */
         console.log('CLICKED');
    })
})

28 views14:05

coding with ☕️

wrapper.addEventListener('click', event => {
    if(event.target && event.target.matches(('button.red'))) {        /* METHOD 3  - DELEGATSIYA */
        console.log('CLICK');
    }
})

33 views14:05

About

Blog

Apps

Platform