ArmoMan

Youtube Tutorials

Categories

No Result Page in Html JavaScript | English version
Display Search History in Html JavaScript and jQuery
Comment faire une alerte dans Javascript, Html | version franaise
How to create an alert box in JavaScript, Html | English version
Search in a website | Functional search bar/box in Html JavaScript | English version
BARRE DE NAVIGATION AVEC PLACE DE RECHERCHE Html, Css et Javascript | version franaise
Barre de recherche fonctionnelle dans JavaScript Html Css | version franaise
Display the same content on another page in Html jQuery | English version
Chercher sur une page Html (Site Web) avec Javascript, Html et Css
NAVBAR WITH SEARCH PLACE in Html, Css and Javascript | English version
Python AutoClicker with Tkinter | Python Graphical Interface | Fast click in python | Application
Compteur de nombre de visiteurs avec JavaScript Html Nodejs Css | version franaise
Customized alert message in JavaScript, Html and Css | English version
TRACK A WORD IN JAVASCRIPT, HTML AND CSS | SEARCH A WORD IN JAVASCRIPT, HTML AND CSS
WORD SEARCHER IN JavaScript, Html and Css
Functional search bar/box in Html JavaScript | English version
Alerte personnalise dans Html, Css et JavaScript | version franaise

No Result Page in Html JavaScript | English version

https://www.youtube.com/watch?v=6OciL4VYlhY&ab_channel=WebDev

Comment faire une alerte dans Javascript, Html | version franaise

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="UTF-8">
        <meta name="viewport"content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>Demo</title>
    </head>

    <body style="background-color: aqua;">
        <p>Bleu ou rouge?</p>
        Bleu:<input type="checkbox" onclick="alerter()">
        Rouge:<input type="checkbox" onclick="badanswer()">
        <script>
            function alerter() {
                alert("Bravo");
            }
            function badanswer() {
                alert("bad answer");
            }
        </script>
    </body>

    </html>

How to create an alert box in JavaScript, Html | English version

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="UTF-8">
        <meta name="viewport"content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>Tuto</title>
    </head>


    <body >
        <p>Red or Blue?</p>
        Blue:<input type="checkbox" onclick="alertbox()">
        Red:<input type="checkbox" onclick="bdalert()">
        <script>
            function alertbox(){
                alert("Good answer");
            }

            function bdalert(){
                alert("Bad answer");
            }

        </script>

    </body>
</html>

Barre de recherche fonctionnelle dans JavaScript Html Css | version franaise

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Tuto</title>
</head>


<body style=" background-color: rgb(47, 121, 231);">

    <style>
        #search {
            border-radius: 30px;
            border: 2px solid black;
        }

        #button {
            background-color: aqua;
            border: 0px solid black;
            height: 30px;
            border-radius: 30px;
            cursor: pointer;
        }
    </style>

    <input type="search" id="search" value="" onchange="ouvrirPage()">
    <input type="button" id="button" onclick="ouvrirPage()" value="Chercher">

    <script>
        function ouvrirPage() {
            var a = document.getElementById("search").value;

            if (a === "chat") {
                window.open("/index.html");
            }

            if (a === "chien") {
                window.open("/customizedalert.html");
            }

            if (a === "youtube") {
                window.open("https://www.youtube.com/");
            }


        }
    </script>


</body>

</html>

Display the same content on another page in Html jQuery | English version

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>
            Load Content From Another Page
        </title>
    </head>

    <body>
        

        <div id="displayedElements"></div>
        <script>
            $('#displayedElements').load('index.html #firstElement, #secondElement, .thirdElement');
        </script>


        <!--Button-->
        <a id="backPage" href="index.html">Go back</a>


        <style>
            #backPage{
                text-decoration: none;
                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                color: rgb(0, 0, 0);
                background-color: gold;
                font-size: 30px;
                border-radius: 20px;
            }
        </style>
        
    </body>

</html>

Chercher sur une page Html (Site Web) avec Javascript, Html et Css

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Tuto</title>
</head>


<body style=" background-color: rgb(4, 41, 255);">
    <input type="search" value="" id="search" onchange="openPage()">

    <script>
        function openPage() {
            var x = document.getElementById("search").value;

            if (x === "dog") {
                window.open("/index.html");
            }

            if (x === "cat") {
                window.open("/customizedalert.html");
            }

        }
    </script>
</body>

</html>

Python AutoClicker with Tkinter | Python Graphical Interface | Fast click in python | Application

https://github.com/Armdevelopper099/autoclicker

Compteur de nombre de visiteurs avec JavaScript Html Nodejs Css | version franaise

https://medium.com/@webdev099/compteur-de-nombre-de-visiteurs-avec-javascript-html-nodejs-css-93d6d8ab20f

Customized alert message in JavaScript, Html and Css | English version

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Tuto</title>
</head>

<body style="background-color: rgb(223, 17, 62);">
    <input type="button" onclick="alertplace()" value="open alert">
    <div id="alertcontainer">
        <div id="alert">
            <p>Welcome my friend</p>
            <p onclick="alertplace()">OK</p>
        </div>
    </div>


    <script>
        function alertplace() {
            var a = document.getElementById("alertcontainer");
            if (a.style.display === "none") {
                a.style.display = "block";
            }
            else {
                a.style.display = "none";
            }
        }
    </script>

    <style>
        #alertcontainer {
            display: none;
            background-color: rgba(0, 0, 0, 0.39);
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            position: fixed;
            text-align: center;
        }

        #alert {
            background-color: white;
            border: 2px solid black;
            position: fixed;
            width: 50%;
            margin-left: 25%;
            top: 30%;
        }

        #alert p:nth-child(2) {
            cursor: pointer;
            background-color: rgb(219, 19, 129);
        }
    </style>
</body>

</html>

WORD SEARCHER IN JavaScript, Html and Css

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Tuto</title>
</head>


<body id="body">
    <p id="title">Lorem ipsum dolor</p>
    <p id="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a vehicula augue. Ut cursus, leo a
        pulvinar pharetra, elit tortor scelerisque nulla, nec convallis sapien risus sit amet tellus. Ut vel ante a
        velit congue facilisis. Pellentesque pellentesque ipsum id mauris blandit blandit. Mauris vitae tempus lectus.
        Fusce nec nulla fringilla, tristique ligula quis, dignissim tortor. Sed non lectus at dolor tempus ullamcorper.
        Pellentesque nec posuere enim. Curabitur auctor, ligula vitae condimentum porttitor, augue urna porta velit, a
        vestibulum nunc neque non justo. Quisque dapibus augue at ullamcorper luctus. Phasellus velit eros, iaculis sit
        amet iaculis vel, porttitor sit amet est. Sed quis risus felis. Duis semper rhoncus mattis. Vivamus sodales diam
        nec turpis rutrum vestibulum.</p>
    <p id="text2">Integer a nunc gravida, lobortis ipsum et, lobortis tellus. Quisque non auctor turpis, a tristique
        lacus. Maecenas sollicitudin pellentesque augue, et pulvinar tellus vulputate vel. Aenean consectetur faucibus
        ipsum. Morbi ex diam, maximus et molestie sed, commodo sed enim. Sed at risus hendrerit, faucibus magna id,
        hendrerit justo. Sed urna sapien, dignissim sed elementum ac, sagittis efficitur risus. Vestibulum velit orci,
        auctor ac justo ac, molestie luctus augue. Nullam hendrerit pulvinar nisl, sed pulvinar purus. Curabitur
        tristique tristique mattis. Donec tincidunt lorem vitae elit condimentum mollis ac nec orci. Pellentesque ornare
        imperdiet mauris nec maximus. Curabitur cursus congue efficitur. Pellentesque vel odio ac libero feugiat
        ullamcorper eu consectetur ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Ut semper ante sed ligula euismod, vitae lacinia risus faucibus.</p>
    <p id="text3">Nulla facilisi. Cras commodo varius risus eu porttitor. Pellentesque et mollis metus. Aenean rutrum
        vel velit et aliquam. Quisque congue, massa vel facilisis viverra, libero est posuere tellus, et dignissim leo
        turpis eu libero. Sed lobortis volutpat tempor. Duis elementum velit facilisis, mollis mi id, iaculis orci.
        Suspendisse cursus ante vitae lectus sodales ultrices. Praesent a gravida nibh, vitae elementum mauris. Maecenas
        pulvinar varius gravida. Aliquam porttitor at nibh non consequat.</p>

    <div id="findword">
        <p id="wordtext">Search a word:</p>
        <input type="text" id="wordsearch" onchange="searchword()" onclick="erase()">
        <p id="output"></p>
    </div>



    <script>
        function searchword() {
            const inp = document.getElementById("wordsearch").value
            const page = document.getElementById("body").innerText;


            if (page.indexOf(inp) > -1) {
                document.getElementById("output").innerHTML = "found";
            }
            else {
                document.getElementById("output").innerHTML = "Not found";
            }
        }

        function erase() {
            document.getElementById("output").innerHTML = "";
            document.getElementById("wordsearch").value = "";
        }
    </script>


    <style>
        p {
            align-content: center;
            text-align: center;
            width: 80%;
            margin-left: 10%;
        }

        #title {
            font-size: 30px;
        }

        input {
            width: 30%;
            margin-left: 35%;
            border: 2px solid black;
        }
    </style>




</body>


</html>

Alerte personnalise dans Html, Css et JavaScript | version franaise

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="UTF-8">
        <meta name="viewport"content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>Tuto</title>
    </head>


    <body  style="background-color: rgb(1, 247, 255);" >

        <input type="button" value="Alerter" onclick="ouvrir()">
        <div id="alertcontainer">
            <div id="alert">
                <p>Alerte!!! en JavaScript, Html et Css</p>
                <p onclick="ouvrir()">OK</p>
            </div>
        </div>

        <script>
            function ouvrir(){
                var a = document.getElementById("alertcontainer");
                if (a.style.display === "none"){
                    a.style.display = "block";
                }
                else{
                    a.style.display = "none";
                }
            }
        </script>


        <style>
            #alertcontainer{
                display: none;
                top: 0px;
                left: 0px;
                position: fixed;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.37);
            }
            #alert{
                width: 50%;
                background-color: rgb(25, 190, 31);
                text-align: center;
                position: fixed;
                left: 25%;
                top: 30%;
                border: 3px solid black;
            }
            #alert p{
                color: white;
                font-size: 20px;
            }
            #alert p:nth-child(2){
                background-color: yellow;
                color: black;
                width: 10%;
                border-radius: 30px;
                cursor: pointer;
                margin-left: 45%;

            }
        </style>
    </body>
</html>