💎 Channel: @htmlcss_channels

SVG Animated Check | #HTML #CSS



💎 Channel: @htmlcss_channels

Top 7 #HTML, #CSS, and #JavaScript Project With Source Code

1. E-commerce Website Using Html Css And Javascript
Click here For Code

2. Restaurant Website Html Css
Click here For Code

3. Personal Portfolio Website
Click here For Code

4. Travel Website Using Html Css
Click here For Code

5. Quiz App Using Javascript
Click here For Code

6. Chatbot Using Javascript
Click here For Code

7. Music Player Game Using JavaScript
Click here For Code






#پروژه

💎 Channel: @htmlcss_channels

#CSS TIP
Use trigonometric functions in CSS to create a smooth stepped transition delay:

.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

💎 Channel: @htmlcss_channels

👨‍🎨 #CSS TIP

shape-outside property in action

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

💎 Channel: @htmlcss_channels

ایجاد پالت های رنگی با تابع
CSS color-mix().

تابع color-mix() به ما این امکان را می دهد که دو رنگی را که می خواهیم با هم مخلوط کنیم را مشخص کرده و سپس نتیجه را خروجی می دهیم. ما می توانیم مقدار هر رنگ در ترکیب را کنترل کنیم و تعیین کنیم رنگ ها چگونه با هم ترکیب شوند.

مقدار هر رنگ را به صورت درصد مشخص می کنیم. اگر درصد هر دو رنگ را حذف کنیم، color-mix() به طور پیش فرض از 50% برای هر کدام استفاده می کند. همانطور که در زیر نشان داده شده است، مخلوط کردن قرمز و آبی در قسمت های مساوی رنگ بنفش را همانطور که انتظار می رود به ما می دهد

.result {
  background-color: color-mix(in srgb, blue, red);
}

#css
💎 Channel: @htmlcss_channels

یک تولید کننده رمز عبور با طول قابل تنظیم.

این مثال یک تولید کننده رمز عبور ساده ایجاد می کند که با فشار دادن دکمه، یک رمز عبور تصادفی با طول مشخص شده از فرم بالا با استفاده از کاراکترهایی از مجموعه نویسه های مشخص شده ایجاد می کند.

<div class="password-generator">
<input type="text" id="passwordLength" placeholder="Password length">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Generate</button></div>

```javascript
function generatePassword() {
const length = parseInt(document.getElementById("passwordLength").value);
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
const charsetLength = charset.length;
let password = [];

for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charsetLength);
password.push(charset[randomIndex]);
}

document.getElementById("password").value = password.join('');
}`



#css #javascript

💎 Channel: @htmlcss_channels

100+ Projects using JavaScript.👇
 
https://www.codewithrandom.com/2023/11/21/frontend-projects-source-code/
 



#پروژه
#javascript

💎 Channel: @htmlcss_channels

📒 𝗘𝗹𝗼𝗾𝘂𝗲𝗻𝘁 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

یکی از بهترین کتابها در مورد جاوا اسکریپت

Read online 👇
https://eloquentjavascript.net/



#javascript

💎 Channel: @htmlcss_channels

‼️ Need a roadmap for your developer journey? find it here

🔗 https://roadmap.sh

Here are 2 of the popular ones:

#Front_End:
🔗 https://roadmap.sh/frontend

#Back_End:
🔗 https://roadmap.sh/backend




#roadmap

💎 Channel: @htmlcss_channels

JavaScript Interview Questions & Challenges 2023




#javascript #interview

💎 Channel: @htmlcss_channels

🔧 CSS TIP

Typing effect

<div class="wrapper">
  <div class="typing-demo">CSS Tips for you!</div>
</div>

.typing-demo {
    width: 17ch; /* Adjust based on the length of your text /
    animation: typing 12s steps(17) infinite, blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
}

/ Typing and erasing animation /
@keyframes typing {
    0% { width: 0; }
    35% { width: 17ch; } / 4s for typing (1/3 of 12s) /
    70% { width: 17ch; } / 5s pause (adding up to 8.4s) /
    100% { width: 0; } / 3.6s for erasing (remaining time) /
}

/ Blinking cursor animation */
@keyframes blink {
    50% { border-color: transparent; }
}

Success & Error popup

https://codepen.io/OfigenusMaximus/pen/XWooeYj


#Animation



💎 Channel: @htmlcss_channels

Animated background [Spheres]


https://codepen.io/OfigenusMaximus/pen/qBLxEdv


#animation


💎 Channel: @htmlcss_channels