Bu eğitim videosunda Emir, izleyicilere analog saat (duvar saati) nasıl HTML, CSS ve JavaScript kullanarak yapabileceklerini göstermektedir.
Video, analog saatin HTML yapısının oluşturulmasıyla başlayıp, CSS ile görsel düzenlemelerin yapılması ve son olarak JavaScript ile saat imleçlerinin (saniye, dakika ve saat) gerçek zamanlı döndürülmesi için gerekli kodlama işlemlerini kapsamaktadır. Özellikle JavaScript'e yeni başlayanlar için uygun bir proje olarak sunulmaktadır.
Videoda açı hesaplamaları, transform-origin özelliğinin önemi ve her saniye verileri çekerek imleçleri döndürme mantığı detaylı olarak açıklanmaktadır.
Yanıtı değerlendir
{"k08f0":{"state":{"logoProps":{"url":"https://yandex.com.tr"},"formProps":{"action":"https://yandex.com.tr/search","searchLabel":"Bul"},"services":{"activeItemId":"summary","items":[{"url":"https://yandex.com.tr/gundem/","title":"Gündem","id":"agenda"},{"url":"https://yandex.com.tr/shopping/","title":"Alışveriş","id":"shopping"},{"url":"https://yandex.com.tr/finance/","title":"Finans","id":"finance"},{"url":"https://yandex.com.tr/yacevap/","title":"YaCevap","id":"answers"},{"url":"https://yandex.com.tr/yaozet/","title":"YaÖzet","id":"summary"},{"url":"https://yandex.com.tr/travel/","title":"Seyahat","id":"travel"},{"url":"https://yandex.com.tr/video/search?text=popüler+videolar","title":"Video","id":"video"},{"url":"https://yandex.com.tr/gorsel/","title":"Görsel","id":"images"}]},"userProps":{"loggedIn":false,"ariaLabel":"Menü","plus":false,"birthdayHat":false,"child":false,"dialogProps":{"host":"yandex.com.tr","lang":"tr","project":"summary","queryParams":{"exp_flags":"skin","preset":"oceania","utm_source":"portal-summary"},"retpath":"https%3A%2F%2Fyandex.com.tr%2Fyaozet%2Fprogramming%2Fhtml-css-ve-javascript-ile-analog-saat-yapimi-egitimi-video-id1-NaHlQz9D%3Flr%3D213%26ncrnd%3D90455","tld":"com.tr","platform":"desktop"},"className":"PortalHeader-User"},"suggestProps":{"selectors":{"form":".HeaderForm","input":".HeaderForm-Input","submit":".HeaderForm-Submit","clear":".HeaderForm-Clear","layout":".HeaderForm-InputWrapper"},"suggestUrl":"https://yandex.com.tr/suggest/suggest-ya.cgi?show_experiment=222&show_experiment=224","deleteUrl":"https://yandex.com.tr/suggest-delete-text?srv=web&text_to_delete=","suggestPlaceholder":"Yapay zeka ile bul","platform":"desktop","hideKeyboardOnScroll":false,"additionalFormClasses":["mini-suggest_theme_tile","mini-suggest_overlay_tile","mini-suggest_expanding_yes","mini-suggest_prevent-empty_yes","mini-suggest_type-icon_yes","mini-suggest_personal_yes","mini-suggest_type-icon_yes","mini-suggest_rich_yes","mini-suggest_overlay_dark","mini-suggest_large_yes","mini-suggest_copy-fact_yes","mini-suggest_clipboard_yes","mini-suggest_turboapp_yes","mini-suggest_expanding_yes","mini-suggest_affix_yes","mini-suggest_carousel_yes","mini-suggest_traffic_yes","mini-suggest_re-request_yes","mini-suggest_source_yes","mini-suggest_favicon_yes","mini-suggest_more","mini-suggest_long-fact_yes","mini-suggest_hide-keyboard_yes","mini-suggest_clear-on-submit_yes","mini-suggest_focus-on-change_yes","mini-suggest_short-fact_yes","mini-suggest_app_yes","mini-suggest_grouping_yes","mini-suggest_entity-suggest_yes","mini-suggest_redesigned-navs_yes","mini-suggest_title-multiline_yes","mini-suggest_type-icon-wrapped_yes","mini-suggest_fulltext-highlight_yes","mini-suggest_fulltext-insert_yes","mini-suggest_lines_multi"],"counter":{"service":"summary_com_tr_desktop","url":"//yandex.ru/clck/jclck","timeout":300,"params":{"dtype":"stred","pid":"0","cid":"2873"}},"noSubmit":false,"formAction":"https://yandex.com.tr/search","tld":"com.tr","suggestParams":{"srv":"serp_com_tr_desktop","wiz":"TrWth","yu":"9665455921760231333","lr":213,"uil":"tr","fact":1,"v":4,"use_verified":1,"safeclick":1,"skip_clickdaemon_host":1,"rich_nav":1,"verified_nav":1,"rich_phone":1,"use_favicon":1,"nav_favicon":1,"mt_wizard":1,"history":1,"nav_text":1,"maybe_ads":1,"icon":1,"hl":1,"n":10,"portal":1,"platform":"desktop","mob":0,"extend_fw":1,"suggest_entity_desktop":"1","entity_enrichment":"1","entity_max_count":"5"},"disableWebSuggest":false},"context":{"query":"","reqid":"1760231414925730-13488591765407306696-balancer-l7leveler-kubr-yp-klg-126-BAL","lr":"213","aliceDeeplink":"{\"text\":\"\"}"},"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"k08fw01-0-1"},"ui":"desktop","service":"summary","fast":{"name":"summary","subtype":"header_tr"}}}}},"type":"summary","subtype":"header_tr"},"k08f1":{"state":{"links":[{"id":"0","title":"Ana Sayfa","url":"/yaozet/","target":"_self"},{"id":"1","title":"Talimatlar","url":"/yaozet/how_to","target":"_self"},{"id":"2","title":"Eğitim","url":"/yaozet/education","target":"_self"},{"id":"3","title":"Tıp","url":"/yaozet/medicine","target":"_self"},{"id":"4","title":"Yasalar","url":"/yaozet/law","target":"_self"},{"id":"5","title":"Finans","url":"/yaozet/finance","target":"_self"},{"id":"6","title":"Oyunlar","url":"/yaozet/games","target":"_self"},{"id":"7","title":"Ürünler","url":"/yaozet/ecom","target":"_self"},{"id":"8","title":"Seyahat","url":"/yaozet/travel","target":"_self"},{"id":"9","title":"Servisler","url":"/yaozet/services","target":"_self"},{"id":"10","title":"Sinema","url":"/yaozet/cinema","target":"_self"},{"id":"11","title":"Programlama","url":"/yaozet/programming","target":"_self"},{"id":"12","title":"Otomobil","url":"/yaozet/auto","target":"_self"},{"id":"13","title":"Yemek","url":"/yaozet/food","target":"_self"},{"id":"14","title":"Bilim","url":"/yaozet/science","target":"_self"},{"id":"15","title":"Spor","url":"/yaozet/sports","target":"_self"},{"id":"16","title":"Edebiyat","url":"/yaozet/literature","target":"_self"},{"id":"17","title":"Emlak","url":"/yaozet/real_estate","target":"_self"},{"id":"18","title":"Diğer","url":"/yaozet/other","target":"_self"}],"activeLinkId":"11","title":"Kategoriler","baobab":{"parentNode":{"context":{"genInfo":{"prefix":"k08fw02-0-1"},"ui":"desktop","service":"summary","fast":{"name":"summary","subtype":"header_categories"}}}}},"type":"summary","subtype":"header_categories"},"k08f2":{"state":{"article":{"title":"HTML, CSS ve JavaScript ile Analog Saat Yapımı","text":"Bu eğitim videosunda Emir, izleyicilere analog saat (duvar saati) nasıl HTML, CSS ve JavaScript kullanarak yapabileceklerini göstermektedir.. Video, analog saatin HTML yapısının oluşturulmasıyla başlayıp, CSS ile görsel düzenlemelerin yapılması ve son olarak JavaScript ile saat imleçlerinin (saniye, dakika ve saat) gerçek zamanlı döndürülmesi için gerekli kodlama işlemlerini kapsamaktadır. Özellikle JavaScript'e yeni başlayanlar için uygun bir proje olarak sunulmaktadır.. Videoda açı hesaplamaları, transform-origin özelliğinin önemi ve her saniye verileri çekerek imleçleri döndürme mantığı detaylı olarak açıklanmaktadır.","brief":{"items":["Bu eğitim videosunda Emir, izleyicilere analog saat (duvar saati) nasıl HTML, CSS ve JavaScript kullanarak yapabileceklerini göstermektedir.","Video, analog saatin HTML yapısının oluşturulmasıyla başlayıp, CSS ile görsel düzenlemelerin yapılması ve son olarak JavaScript ile saat imleçlerinin (saniye, dakika ve saat) gerçek zamanlı döndürülmesi için gerekli kodlama işlemlerini kapsamaktadır. Özellikle JavaScript'e yeni başlayanlar için uygun bir proje olarak sunulmaktadır.","Videoda açı hesaplamaları, transform-origin özelliğinin önemi ve her saniye verileri çekerek imleçleri döndürme mantığı detaylı olarak açıklanmaktadır."],"text":"Bu eğitim videosunda Emir, izleyicilere analog saat (duvar saati) nasıl HTML, CSS ve JavaScript kullanarak yapabileceklerini göstermektedir.. Video, analog saatin HTML yapısının oluşturulmasıyla başlayıp, CSS ile görsel düzenlemelerin yapılması ve son olarak JavaScript ile saat imleçlerinin (saniye, dakika ve saat) gerçek zamanlı döndürülmesi için gerekli kodlama işlemlerini kapsamaktadır. Özellikle JavaScript'e yeni başlayanlar için uygun bir proje olarak sunulmaktadır.. Videoda açı hesaplamaları, transform-origin özelliğinin önemi ve her saniye verileri çekerek imleçleri döndürme mantığı detaylı olarak açıklanmaktadır."},"detailed":{"text":"Videoda analog duvar saati yapımı gösterilecek ve bu proje JavaScript'te yeni başlayanlar için iyi bir uygulama olacak.. Proje HTML, CSS ve JavaScript dosyaları kullanılarak kodlanacak.. Saat yapılandırması; saat, dakika, saniye ve merkezdeki nokta olacak.","chapters":null,"keypoints":[{"id":1,"start_time":1,"theses":[{"id":0,"link":null,"text":"Videoda analog duvar saati yapımı gösterilecek ve bu proje JavaScript'te yeni başlayanlar için iyi bir uygulama olacak."},{"id":1,"link":null,"text":"Proje HTML, CSS ve JavaScript dosyaları kullanılarak kodlanacak."},{"id":2,"link":null,"text":"Saat yapılandırması; saat, dakika, saniye ve merkezdeki nokta olacak."}],"title":"Analog Saat Projesi Tanıtımı"},{"id":2,"start_time":44,"theses":[{"id":0,"link":null,"text":"HTML dosyasında saat, dakika, saniye ve nokta için temel yapı oluşturuluyor."},{"id":1,"link":null,"text":"CSS ile sayfa merkezlenecek şekilde düzenleniyor ve saat kutusuna arka plan, border ve border-radius özellikleri ekleniyor."},{"id":2,"link":null,"text":"Saniye, dakika ve saat için pozisyon absolute ve transform-origin özellikleri kullanılarak merkez etrafında dönmeleri sağlanacak."}],"title":"HTML ve CSS Kodlaması"},{"id":3,"start_time":475,"theses":[{"id":0,"link":null,"text":"JavaScript ile saat, dakika ve saniye elemanları seçiliyor ve \"tikTak\" adlı bir fonksiyon oluşturuluyor."},{"id":1,"link":null,"text":"Fonksiyon her saniye çalışacak şekilde ayarlanıyor ve mevcut saat bilgileri alınıyor."},{"id":2,"link":null,"text":"Saniye imlecinin her saniye 6 derece, dakika imlecinin her dakika 6 derece ve saat imlecinin her saat 30 derece döndüğü hesaplamalar yapılıyor."}],"title":"JavaScript ile Döndürme Etkisi"},{"id":4,"start_time":790,"theses":[{"id":0,"link":null,"text":"Saat 8:32'yi gösteriyor ve saniye bazında çalışıyor."},{"id":1,"link":null,"text":"Analog saat kodu, açılarla ilgili basit matematik hesaplamaları yaparak çalışıyor."},{"id":2,"link":null,"text":"JavaScript'te yerel fonksiyonlar üzerinden her saniye verileri çekip, CSS ayarlarıyla imleçleri döndürerek saat işleniyor."}],"title":"Analog Saat Kodunun Çalışma Prensibi"},{"id":5,"start_time":813,"theses":[{"id":0,"link":null,"text":"Videolar acele ve serde anlatıldığı için gözden kaçan detaylar olabilir."},{"id":1,"link":null,"text":"Videoların sıkıcı olmaması için hızlı tutulmaya çalışılıyor ve anahtar kısımlar vurgulanıyor."},{"id":2,"link":null,"text":"Bu proje JavaScript'te yeni başlayanlar için iyi bir uygulama olabilir."}],"title":"Video Hakkında Bilgilendirme"},{"id":6,"start_time":883,"theses":[{"id":0,"link":null,"text":"İzleyicilerden videoyu beğenmeleri ve kanala abone olmaları isteniyor."},{"id":1,"link":null,"text":"Sorular, video istekleri veya tavsiyeler için yorum atma imkanı sunuluyor."}],"title":"Kapanış ve Kullanıcıyla İletişim"}]},"type":"video","categoryId":"programming","url":"https://www.youtube.com/watch?v=tEPZdVcdwoU","urlProcessed":"https://yandex.com.tr/yaozet/programming/html-css-ve-javascript-ile-analog-saat-yapimi-egitimi-video-id1-NaHlQz9D/programming/html-css-ve-javascript-ile-analog-saat-yapimi-egitimi-video-id1-NaHlQz9D","pageUrl":"https://yandex.com.tr/yaozet/programming/html-css-ve-javascript-ile-analog-saat-yapimi-egitimi-video-id1-NaHlQz9D?lr=213","sharingPath":"programming/html-css-ve-javascript-ile-analog-saat-yapimi-egitimi-video-id1-NaHlQz9D","video_embed_url":"https://www.youtube.com/embed/tEPZdVcdwoU"},"pageUrl":"https://yandex.com.tr/yaozet/programming/html-css-ve-javascript-ile-analog-saat-yapimi-egitimi-video-id1-NaHlQz9D?lr=213","header":{"title":"HTML, CSS ve JavaScript ile Analog Saat Yapımı","homeUrl":"/yaozet/","sourceUrl":"https://www.youtube.com/watch?v=tEPZdVcdwoU","hasShare":true,"canUseNativeShare":false,"extralinksItems":[{"variant":"reportFeedback","reportFeedback":{"feature":"YaOzet","title":"Bu yanıtta yanlış olan nedir?","checkBoxLabels":[{"value":"Uygunsuz veya aşağılayıcı yanıt"},{"value":"Bilgi az"},{"value":"Bilgi güncel değil"},{"value":"Görüntüleme hataları"},{"value":"Diğer"}]}}],"categoryUrl":"/yaozet/programming","categoryTitle":"Programlama"},"feedbackProps":{"feature":"Summary","baseProps":{"metaFields":{"yandexuid":"9665455921760231333","reqid":"1760231414925730-13488591765407306696-balancer-l7leveler-kubr-yp-klg-126-BAL"}},"positiveCheckboxLabels":[{"value":"Yanıtı çok beğendim"},{"value":"Yanıtta gerekli bilgiler var"},{"value":"Kolay anlaşılır"},{"value":"Diğer"}],"negativeCheckboxLabels":[{"value":"Uygunsuz veya aşağılayıcı yanıt"},{"value":"Bilgi az"},{"value":"Bilgi güncel değil"},{"value":"Görüntüleme hataları"},{"value":"Diğer"}]},"isHermione":false,"dialogStoreProps":{"baseUrl":""},"globalStoreProps":{"imageBackendUrl":"https://yandex.com.tr/images-apphost/image-download?cbird=171","query":"","retina":false,"avatarId":"0","isHermione":false,"isMacOS":false,"tld":"com.tr","isEmbeddedFuturis":false,"isLoggedIn":false,"brand":"yazeka","reqId":"1760231414925730-13488591765407306696-balancer-l7leveler-kubr-yp-klg-126-BAL","device":{"isIOS":false,"platform":"desktop"},"neuroMordaUrl":"","advChatParams":{"advLabelProps":{"compactAdvLabel":false},"needPrerenderCounter":false},"disableUrlParamsModification":false,"feedbackBaseProps":{"featureName":"summary","metaFields":{"yandexuid":"9665455921760231333","reqid":"1760231414925730-13488591765407306696-balancer-l7leveler-kubr-yp-klg-126-BAL"}},"adapterName":"summary"},"video":{"embedUrl":"https://www.youtube.com/embed/tEPZdVcdwoU","videoSubtitle":"Yapay zekadan makale özeti"},"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"k08fw03-0-1"},"ui":"desktop","service":"summary","fast":{"name":"summary_item_response"}}}}},"type":"summary_item_response"},"k08f3":{"state":{"isIndex":false,"form":{"name":"yaozet","action":"/yaozet/create","validatePath":"/yaozet/create/json"},"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"k08fw04-0-1"},"ui":"desktop","service":"summary","fast":{"name":"summary","subtype":"right-column"}}}}},"type":"summary","subtype":"right-column"},"k08f4":{"state":{"generalLinks":[{"id":"privacy-policy","text":"Gizlilik politikası","url":"https://yandex.com.tr/legal/privacy_policy/tr/"},{"id":"terms-of-service","text":"Kullanıcı sözleşmesi","url":"https://yandex.com.tr/legal/yaozet_termsofuse"},{"id":"report-error","text":"Hata bildir","url":"https://forms.yandex.com.tr/surveys/13748122.01a6645a1ef15703c9b82a7b6c521932ddc0e3f7/"},{"id":"about-company","text":"Şirket hakkında","url":"https://yandex.com.tr/project/portal/contacts/"}],"copyright":{"url":"https://yandex.com.tr","currentYear":2025},"socialLinks":[{"url":"https://www.tiktok.com/@yandex.turkiye","type":"tiktok","title":"TikTok"},{"url":"https://www.youtube.com/@YandexTurkiye","type":"youtube","title":"Youtube"},{"url":"https://www.facebook.com/YandexComTr","type":"facebook","title":"Facebook"},{"url":"https://www.instagram.com/yandex__turkiye/","type":"instagram","title":"Instagram"},{"url":"https://x.com/yndxturkiye","type":"x","title":"X"}],"categoriesLink":[],"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"k08fw05-0-1"},"ui":"desktop","service":"summary","fast":{"name":"summary","subtype":"footer_tr"}}}}},"type":"summary","subtype":"footer_tr"}}