getcodr: May 2023

Wednesday, 31 May 2023

Introduction to HTML: A Beginner's Guide to Building Web Pages || Learn HTML Basic

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages and web applications. It provides a structure for organizing and presenting content on the internet. Here's some basic knowledge about HTML:

1. Tags :

HTML consists of a series of tags that define the structure and elements of a web page. Tags are enclosed in angle brackets (`<>`) and come in pairs (opening and closing tags), although some tags are self-closing. Examples of tags include `<html>`, `<head>`, `<body>`, `<p>`, `<h1>`, `<img>`, etc.

2. Elements:

Elements are created by using HTML tags. They represent different types of content such as headings, paragraphs, images, links, lists, tables, forms, etc. Elements can have attributes that provide additional information about them, such as the `src` attribute for specifying the source of an image.

3. Document Structure:

An HTML document typically starts with a `<!DOCTYPE>` declaration, followed by the `<html>` element, which contains the entire document. The document is divided into `<head>` and `<body>` sections. The `<head>` section includes meta-information, title, and links to external resources, while the `<body>` section contains the visible content of the webpage.

4. Headings:

HTML provides six levels of headings (`<h1>` to `<h6>`) that represent different levels of importance. `<h1>` is the highest level and is usually used for the main heading of the page, while `<h2>` to `<h6>` are used for subheadings.

5. Paragraphs:

Paragraphs are created using the `<p>` tag. They represent blocks of text and are automatically separated by line breaks.

6. Links:

Links allow users to navigate between different web pages. They are created using the `<a>` (anchor) tag and require an `href` attribute to specify the target URL. For example: `<a href="https://www.example.com">Visit Example</a>`.

7. Images:

Images are inserted using the `<img>` tag. The `src` attribute specifies the source URL of the image, and the `alt` attribute provides alternative text that is displayed if the image cannot be loaded. Example: `<img src="image.jpg" alt="Description of the image">`.

8. Lists:

HTML supports both ordered and unordered lists. Unordered lists are created using the `<ul>` tag, and list items are created with the `<li>` tag. Ordered lists use the `<ol>` tag instead of `<ul>`. Example:

```

<ul>

</ul>

```

9. Tables:

Tables are created using the `<table>` tag, with rows represented by the `<tr>` tag and cells within the row using the `<td>` or `<th>` tags for data cells and header cells, respectively.

10. Forms:

HTML provides form elements such as `<input>`, `<textarea>`, `<select>`, and `<button>` for creating interactive forms on web pages. Users can input data, make selections, and submit the form to a server for processing.

These are just some basic concepts of HTML. HTML also allows you to apply CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, among many other features and elements.

getcodr

Greets Users Using React JS by getcodr || React JS Projects

Create a Greeting Massage For Users , Using React js

 import React from 'react'
import ReactDOM from 'react-dom' ;


let curdate = new Date();
curdate = curdate.getHours();
let greeting = "" ;
const rampir = {} ;

if(curdate >= 1 && curdate <11){
    greeting ="Good Morning";
    rampir.color = "green" ;
}
else if(curdate >= 12 && curdate <19){
    greeting = "Good Afternoon";
    rampir.color = "Orange" ;

}
else{
    greeting = "Good Night" ;
    rampir.color = "black" ;
}
ReactDOM.render(
    <>
    <h1>Hello Sir ,<span style={rampir}> {greeting}</span> </h1>
    </>,
    document.getElementById('root')

)

                                my youtube channel
                                    getcodr

Tuesday, 30 May 2023

ARTICLE ABOUT HTML (HYPERTEXT MARKUP LANGUAGE) || LEARN HTML

Monday, 29 May 2023

Guess a number between 1 and 100 Game using HTML & JAVASCRIPT By getcodr

 <!DOCTYPE html>
<html>
<head>
  <title>Number Guessing Game</title>
</head>
<body>
  <h1>Number Guessing Game</h1>
  <p>Guess a number between 1 and 100:</p>
  <input type="text" id="guessInput">
  <button onclick="checkGuess()">Submit</button>
  <p id="message"></p>

  <script>
    // Generate a random number between 1 and 100
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    var message = document.getElementById("message");

    function checkGuess() {
      var guessInput = document.getElementById("guessInput");
      var guess = parseInt(guessInput.value);

      if (isNaN(guess)) {
        message.textContent = "Invalid guess. Please enter a number.";
      } else if (guess < 1 || guess > 100) {
        message.textContent = "Please enter a number between 1 and 100.";
      } else {
        if (guess === randomNumber) {
          message.textContent = "Congratulations! You guessed the correct number.";
        } else if (guess < randomNumber) {
          message.textContent = "Too low. Try again.";
        } else {
          message.textContent = "Too high. Try again.";
        }
      }

      guessInput.value = ""; // Clear the input field
      guessInput.focus(); // Set focus back to the input field
    }
  </script>
</body>
</html>

                                  My YouTube Channel 
                                        getcodr      

Rock, Paper, Scissors Game using HTML & JAVASCRIPT by getcodr

 <!DOCTYPE html>
<html>
<head>
  <title>Rock, Paper, Scissors Game</title>
</head>
<body>
  <h1>Rock, Paper, Scissors Game</h1>
  <p>Make your choice:</p>
  <button onclick="playGame('rock')">Rock</button>
  <button onclick="playGame('paper')">Paper</button>
  <button onclick="playGame('scissors')">Scissors</button>
  <p id="result"></p>

  <script>
    function playGame(userChoice) {
      var choices = ["rock", "paper", "scissors"];
      var computerChoice = choices[Math.floor(Math.random() * choices.length)];
      var result = document.getElementById("result");

      result.textContent = "Your choice: " + userChoice 
                             + " | Computer's choice: " + computerChoice;

      if (userChoice === computerChoice) {
        result.textContent += " | It's a tie!";
      } else if (
        (userChoice === "rock" && computerChoice === "scissors") ||
        (userChoice === "paper" && computerChoice === "rock") ||
        (userChoice === "scissors" && computerChoice === "paper")
      ) {
        result.textContent += " | You win!";
      } else {
        result.textContent += " | Computer wins!";
      }
    }
  </script>
</body>
</html>


                                MY YOUTUBE CHANNEL  
                                     getcodr

Sunday, 28 May 2023

Make A color code Genertor using HTML , CSS & JAVASCRIPT by getcodr

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/cmpv/colorcodegen/custom.css" />
</head>

<body>
    <div class="main">
        <div class="container">
            <h2 id="color-code">#fff</h2>
            <button id="btn">Click Me</button>
        </div>
    </div>
    <script src="/cmpv/colorcodegen/app.js"></script>
</body>

</html>
                                        CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    transition: 0.5s;
}

.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 30rem;
    padding: 10px;
    border-radius: 10px;
    font-size: 40px;
    background-color: white;
    text-align: center;
}

button {
    margin-top: 5px;
    width: 100%;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    display: block;
    font-size: 35px;
}


                                        java script 


const getColor = () => {
    // Hex Code
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomCode = "#" + randomNumber.toString(16);
    document.body.style.backgroundColor = randomCode;
    document.getElementById("color-code").innerText = randomCode;

    navigator.clipboard.writeText(randomCode)
}
//event call
document.getElementById("btn").addEventListener(
    "click",
    getColor
)
// init call
getColor();


                        My You Tube Channel

Make A Calculator Using HTML , CSS & JAVASCRIPT by getcodr

HTML



<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body>
    <div class="calculator">
        <input type="text" placeholder="0" id="inputBtn">
        <div>
            <button class="button">C</button>
            <button class="button">%</button>
            <button class="button">M+</button>
            <button class="button">M-</button>
        </div>
        <div>
            <button class="button">7</button>
            <button class="button">8</button>
            <button class="button">9</button>
            <button class="button">*</button>
        </div> 
        <div>
            <button class="button">4</button>
            <button class="button">5</button>
            <button class="button">6</button>
            <button class="button">/</button>
        </div> 
        <div>
            <button class="button">1</button>
            <button class="button">2</button>
            <button class="button">3</button>
            <button class="button">+</button>
        </div>
        <div>
            <button class="button equlBtn">=</button>
            <button class="button">0</button>
            <button class="button">.</button>
            <button class="button ">-</button>
        </div>
    </div>
    <script src="cal.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg , #0a0a0a , #3a4452);

}
.calculator{
    border: 1px solid #177377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0 3px 15px rgb(113 , 115, 119 , 0.5);
}
input{
    color: white;
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0 3px 15px rgb(84 , 84, 84 , 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
}
 input::placeholder{
    color: #ffffff;
}
 button{
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgb(255, 255, 255 , 0.1);
    cursor: pointer;
    color: #ffffff;

}
  .equlBtn{
    background-color: #fb7c14;

}


JAVASCRIPT



   let string = "";
  let buttons = document.querySelectorAll('.button');

  Array.from(buttons).forEach((button) =>{
    button.addEventListener('click',(e)=>{
        if(e.target.innerHTML == '='){
            string = eval(string) ;
            document.querySelector('input').value = string ;
        }
        else if(e.target.innerHTML == 'C'){
            string = " " ;
            document.querySelector('input').value = string ;
        }
        else {
            console.log(e.target)
            string = string + e.target.innerHTML ;
            document.querySelector('input').value = string ;
        }
    })
    
})


                                       My Youtube channel  

Animation cycle game using HTML & CSS By getcodr

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Using Html & Css</title>
    <style>
        body{
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
    </style>
</head>
<body background="/cmpv/animation cyclr/gifs/bg.jpg">
    <marquee behavior="" direction="" scrollamount = "18">
        <img src="/cmpv/animation cyclr/gifs/birds.gif" width="16%" > 
    </marquee>
    <br><br>   <br><br>   <br>
    <marquee behavior="" direction="right" scrollamount = "35">
        <img src="/cmpv/animation cyclr/gifs/1.gif" width="26%">
        <img src="/cmpv/animation cyclr/gifs/2.gif" width="22%">
        <img src="/cmpv/animation cyclr/gifs/3.gif" width="16%">
        <img src="/cmpv/animation cyclr/gifs/4.gif" width="30%">
  </marquee>
    
</body>
</html>













YouTube Channel



  

Wednesday, 31 May 2023

HTML (Hypertext Markup Language)

1. **Tags** :

2. **Elements**:

3. **Document Structure**:

4. **Headings**:

5. **Paragraphs**:

6. **Links**:

7. **Images**:

8. **Lists**:

9. **Tables**:

10. **Forms**: