Akos  Mester

Akos Mester

1622219856

How To Create A Responsive Pricing Table With Toggle Effect Using Vanilla Javascript | Pricing Table

In this video we will create a responsive pricing table with toggle effect using html css and vanilla javascript.

google fonts:

https://fonts.google.com/specimen/Nun…

Subscribe: https://www.youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw/featured

#javascript

What is GEEK

Buddha Community

How To Create A Responsive Pricing Table With Toggle Effect Using Vanilla Javascript | Pricing Table
Akos  Mester

Akos Mester

1622219856

How To Create A Responsive Pricing Table With Toggle Effect Using Vanilla Javascript | Pricing Table

In this video we will create a responsive pricing table with toggle effect using html css and vanilla javascript.

google fonts:

https://fonts.google.com/specimen/Nun…

Subscribe: https://www.youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw/featured

#javascript

CSS Boss

CSS Boss

1606912089

How to create a calculator using javascript - Pure JS tutorials |Web Tutorials

In this video I will tell you How to create a calculator using javascript very easily.

#how to build a simple calculator in javascript #how to create simple calculator using javascript #javascript calculator tutorial #javascript birthday calculator #calculator using javascript and html

Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

Create a Line Through Effect with JavaScript

In this post, we are going to create an amazing line through effect, with help of CSS and lots of JavaScript.

So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.htmlmain.js and styles.css inside it. We are also opening the files in VS Code.

Image for post

VS Code

Now, we will add the basics html in index.html and also link both css and js files. We have very little html in this project, with div with id of line and an h1 with an id of text.

Image for post

#javascript-projects #javascript-tips #javascript #javascript-development #javascript30

野村  陽一

野村 陽一

1638056820

Javascriptでのダーク&ライトモードの切り替え

ダークテーマは、ウェブサイトのデザインの最も重要な側面の1つです。これは、過去数年間のトレンド機能です。これの主な理由の1つは、特にそれほど照らされていないスペースで、高輝度による目の負担を避け、安全性を提供することです。

今日のチュートリアルでは、ダークモードスイッチを作成する方法を学習します。ユーザーがこのスイッチをクリックすると、Webページ/ Webサイトのテーマがダークモードとライトモードの間で切り替わります。このチュートリアルでは、コードを大幅に変更したり、CSSを過剰に追加したりせずに、ダークテーマオプションをWebサイトに追加する方法の基本的な考え方を理解できます。

UIデザインのダークテーマに関しては、すべきこととすべきでないことがいくつかあります。このチュートリアルでは、それらについて簡単に説明します。このチュートリアルでは、HTML、CSS、VanillaJavascriptが必要です。私たちが使用するJavaScriptコードはそれほど複雑ではないので、心配する必要はありません。それでは、チュートリアルを始めましょう。

HTML:

HTMLファイルを作成し、「index.html」という名前で保存します。以下に提供するコードをコピーして、HTMLファイルに貼り付けてください。
HTMLには多くの要素が含まれていません。クラス名「container」で「div」要素を作成しましょう。コンテナはチェックボックスを閉じます。このチェックボックスには、「toggle」という名前のIDを割り当てます。ここでチェックボックスを使用する理由は、スタイルを設定してトグルスイッチとして使用するためです。
次に、HTMLにデモテキストを追加する必要があります。この目的のために、いくつかの「loremipsum」テキストを追加しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dark Mode Toggle</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="checkbox" id="toggle">
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, ab sequi! Ipsum, reprehenderit! Dolor vero sunt corporis ea natus, nulla cum assumenda. Nostrum corporis molestiae corrupti magni. Corporis ducimus ipsam, qui et eveniet nisi excepturi sint dolore, labore velit repellat quia quasi! Repellendus quo magni voluptatem aut odit, totam sequi autem, doloremque minima tenetur placeat debitis reiciendis repudiandae dolore tempore adipisci blanditiis reprehenderit doloribus recusandae esse commodi harum ratione quisquam?
    </p>
    <script src="script.js"></script>
</body>
</html>

CSS:

スタイルシートを作成し、「style.css」という名前を付けます。次に、以下のコードをコピーして、スタイルシートに貼り付けます。

まず、ボディにパディングを追加します。次に、幅を追加し、コンテナを中央に配置します。チェックボックスをトグルスイッチのようにスタイル設定するには、疑似要素の「後」に配置します。「後」の疑似要素は、太陽を表す円のように見えます。

暗いテーマのクラスにスタイルを追加する必要があります。このクラスは、ユーザーがトグルをクリックしたときに本体に適用されます。

ダークテーマでは、背景色は「#15181f」に設定されます。灰色またはより暗い灰色の色合いを使用します。黒の使用は避けてください。全体的に黒い色は眼精疲労を引き起こす可能性があります。グレーの濃い色合いがより適しています。フォントの色については、彩度の低いバージョンの白を選択します。
 

暗闇の中で、テーマのスイッチの背景色が白に変わります(または彩度の低いバージョンの白を使用できます)。'after'疑似要素は、box-shadowプロパティを使用して月のように見えるように作成されます。

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.container{
    width: 100%;
    height: 40px;
    position: relative;
    margin-bottom: 30px;
}
#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 75px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}
#toggle:after{
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}
p{
    font-family: "Open Sans",sans-serif;
    line-height: 35px;
    text-align: justify;
}
.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}

Javascript:

最後のステップとして、このトグルを機能させるための機能を追加する必要があります。'script.js'というJavaScriptファイルを作成します。ここに記載されているコードをコピーして、スクリプトファイルに貼り付けます。

javascriptで行う唯一のことは、「クリック」イベントリスナーをトグルに追加することです。クリックイベントでは、ドキュメント本文で「ダークテーマ」クラスが切り替えられます。このようにして、ユーザーがスイッチをクリックすると、ダークモードが追加および削除されます。

document.getElementById("toggle").addEventListener("click", function(){
    document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});

これでダークモードスイッチの準備が整いました。これは、Webページにダークモードを追加する方法の1つを紹介する小さな例ですが、先に進んでこれを展開し、Webサイト全体にダークモードを追加できます。このチュートリアルが気に入ったら、必ず私のYouTubeチャンネルをチェックしください次のチュートリアルでお会いしましょう。


リンク: https://codingartistweb.com/2021/07/dark-light-mode-toggle-javascript/

#javascript