Тёмный
No video :(

Wordle in JavaScript in 20 minutes 

Double D
Подписаться 9 тыс.
Просмотров 23 тыс.
50% 1

Опубликовано:

 

26 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 62   
@swapnilkawade2286
@swapnilkawade2286 Год назад
This is so amazing! Thank you! Would love to see such plain Javascript games in future! Keep it up!
@charl3s_76
@charl3s_76 7 месяцев назад
helped me create my first project ! took me several tries as I've never used CSS or HTML before but It worked out. thanks gang
@DoubleDYouTube
@DoubleDYouTube 7 месяцев назад
That's awesome, keep it up!
@carson2money
@carson2money 5 месяцев назад
Never coded in my life before but wanted to try and make this. Spent a ridiculous amount of time not realizing ' and ` are much different lmao
@DoubleDYouTube
@DoubleDYouTube 5 месяцев назад
The more you know...
@Rexon__
@Rexon__ Год назад
Great Video, don't think anyone noticed the images on the desktop lol!
@Olja226
@Olja226 2 года назад
Very calming and interesting at the same time. And I don't even code 😀
@DoubleDYouTube
@DoubleDYouTube 2 года назад
What a compliment. Thank you!
@jaffaritaffari6583
@jaffaritaffari6583 Год назад
Quick and efficient. Thank you for this vid
@eatmungbeans
@eatmungbeans Год назад
fantastic! wordle in 20 minutes. brilliant! great video
@zeroxiph
@zeroxiph 2 года назад
This video is very helpful, thanks so much.
@peroggi
@peroggi 2 года назад
Blessed is this day, for he has posted once more.
@DoubleDYouTube
@DoubleDYouTube 2 года назад
What's up, dude
@peroggi
@peroggi 2 года назад
@@DoubleDRU-vid Am going to classes to get my drivers licence rn, so das nice. Nm other than that and ofc existencial dread
@peroggi
@peroggi 2 года назад
@@DoubleDRU-vid wha chu been up to besides cooding?
@DoubleDYouTube
@DoubleDYouTube 2 года назад
@@peroggi I should do that too, but i'm too lazy. I went to a wedding, went to a job interview, didn't get the job, but both experiences were cool
@peroggi
@peroggi 2 года назад
@@DoubleDRU-vid Love weddings, great excuse to get wasted
@m0t9_top
@m0t9_top 2 года назад
Hello! Thank you very much for your useful video) This is the most short and understandable tutorial I've ever seen. I think, you made a mistake in revealWord function. Imagine that secret word is 'OFTEN' and you input the word 'OFFER'. You've guess the letter on second position, but you also see the yellow background behind the third letter. You will think, that secret word contains at least 2 letters 'F'. But it's not true. I've fix this issue in my game Blindle (it has the same goal to guess the word, but verdicts for each word you see after sixth turn). I think RU-vid will remove my comment if I place my GitHub repo link here. Thank you!
@DoubleDYouTube
@DoubleDYouTube 2 года назад
Thanks so much! I'm glad you enjoyed it. I actually noticed this problem while recording the video and I thought about the exact same scenario. But I decided to leave it out just because it was a very specific case and I thought it would perhaps confuse some viewers. Good job noticing it! The way I would fix this is - before checking which color to paint the letter, I would check the number of occurrences of the letter in both the secret word and the player's word. If the player's word has more occurrences, I would skip the color checking and paint the box gray immediately. Otherwise, I would proceed with the color checking. Hopefully this makes sense. EDIT: I updated my GitHub repo to fix this issue :)
@dezcraft_dev
@dezcraft_dev Год назад
This is great!
@nicksporter2745
@nicksporter2745 Год назад
Thank you for this, works great! Question: Is there a way to make this functional on mobile? Don't believe there's a way to type answers on phone as-is? Thanks again
@diogodelvalle4306
@diogodelvalle4306 8 месяцев назад
Amazing video ^^, is there a way to use APIs for the dictionary instead?
@DoubleDYouTube
@DoubleDYouTube 8 месяцев назад
Of course, you can use a dictionary API to get a random word at the start of the game.
@pinkykids310
@pinkykids310 2 года назад
When I put the javascript code it doesn't work what is the problem Knowing that I put them all in one file and not every language alone in a file as you did
@DoubleDYouTube
@DoubleDYouTube 2 года назад
If you copied the code exactly as it was for me, it won't work all in one file. It's better practice to separate them anyway.
@pinkykids310
@pinkykids310 2 года назад
@@DoubleDRU-vid Thank you very much :)
@Old_SDC
@Old_SDC 2 года назад
How would I use a json file for the dictionary instead?
@DoubleDYouTube
@DoubleDYouTube 2 года назад
That's a great question! You can have a local json file and load it in using the fetch function: const dictionary = await fetch('./pathToFile/dictionary.json');
@Old_SDC
@Old_SDC 2 года назад
@@DoubleDRU-vid thank you!
@user-sr8xw3vq7b
@user-sr8xw3vq7b Год назад
Thanks for the video, I really liked everything, but I have a question. Is it possible to make this game in another language, if so, what would need to be changed?
@DoubleDYouTube
@DoubleDYouTube Год назад
What language do you have in mind?
@user-sr8xw3vq7b
@user-sr8xw3vq7b Год назад
@@DoubleDRU-vid Tatar language
@DoubleDYouTube
@DoubleDYouTube Год назад
@@user-sr8xw3vq7b Oh i thought you meant programming language 😃 Yeah, you would need to go through all the files (html and js) and change the text there.
@user-sr8xw3vq7b
@user-sr8xw3vq7b Год назад
Good, thanks@@DoubleDRU-vid
@Ys4ever
@Ys4ever 10 месяцев назад
Hello , thank you for your content amazing work , i added keybord but i couldn’t manage to change the alert at the and to a pop up with correct word or congratulation and try again / go home button !! Can u help me with that !! Thank you
@DoubleDYouTube
@DoubleDYouTube 10 месяцев назад
Lookup "html dialog" and check out some examples to see how to do it. If you want a restart button, you will also need to write some javascript.
@Ys4ever
@Ys4ever 10 месяцев назад
⁠​⁠@@DoubleDRU-vid thank you for reply !! Can i contact you am almost done with a project but stuck on some issues including wordle
@DoubleDYouTube
@DoubleDYouTube 10 месяцев назад
@@Ys4ever If you need help with a project, you can message me on Fiverr ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uP68sGm6zTU.html
@Ys4ever
@Ys4ever 10 месяцев назад
Thank you 🙏🏻
@tsaintreal
@tsaintreal Год назад
I have a question. Is there anyway to add a detection if there's only one of the letter. Let's your word is AGENT and you guess SHEEP , it'll tell you the third E is right, but the fourth E is still in there.
@DoubleDYouTube
@DoubleDYouTube Год назад
Yes, great question! This is an edge case that I noticed when making the wordle clone, but I left it out of the video to avoid confusion and to keep things short. The way I handled this case is by checking the number of occurrences of each letter in your guess, as opposed to the secret. The second condition is that the current letter position is higher than the number of letter occurrences in the secret. So basically: if (occurrence(letter, guess) > occurrence(letter, secret) && (letterPosition > occurrence(secret)) ==> move on to next letter If this sounds confusing, check out my Github code (especially line 117 linked below) or ask if you have any follow up questions. github.com/DoubleDebug/wordle-speedrun/blob/cf2ad83530850b89abbfecf46ae84c157adce626/src/index.js#L117
@tsaintreal
@tsaintreal Год назад
@@DoubleDRU-vid another question. I've added something new to my code: document.getElementById("worl").innerHTML = 'Better luck next time! The word was .'; how do I add the secret word after "The word was"??
@DoubleDYouTube
@DoubleDYouTube Год назад
@@tsaintreal There's a few ways, but the most simple one is just appending it at the end of your text: document.getElementById("word").innerHTML = "Better luck next time! The word was " + state.secret;
@tsaintreal
@tsaintreal Год назад
@@DoubleDRU-vid thanks
@freakinluke500
@freakinluke500 2 года назад
How do I make it a 4 letter word instead?
@DoubleDYouTube
@DoubleDYouTube 2 года назад
Change the grid into a 4 x 4 grid and instead of 5 letter words, use 4 letter ones. You might have to go through the code and make sure everything works but that's pretty much it.
@VLLX
@VLLX Год назад
Im at 6:09 and i've followed all the steps. When I run the code, it's just a white screen.
@DoubleDYouTube
@DoubleDYouTube Год назад
Check your html and css files, you're probably missing some code there.
@VLLX
@VLLX Год назад
HTML: Wordle
@VLLX
@VLLX Год назад
CSS: html, body { background: var(--deafult); } :root { --deafult: #121213; --empty: #3a3a3c; --wrong: #b59f3b; --right: #538d4e; } #game { display: grid; place-items: center; width: 100%; height: 600px; } .grid { display: grid; grid-template-rows: repeat(6, auto); grid-template-columns: repeat(5, auto); } .box { width: 60px; height: 60px; border: 2px solid var(--empty); margin: 4px; color: white; text-transform: uppercase; display: grid; place-items: center; font-family: Arial, Helvetica, sans-serif; font-size: 2.4rem; } .box.empty { background: var(--empty); } .box.wrong { background: var(--wrong); } .box.right { background: var(--right); }
@VLLX
@VLLX Год назад
@@DoubleDRU-vid does the index.html have to be inside the src folder?
@DoubleDYouTube
@DoubleDYouTube Год назад
@@VLLX No
@TNB-k5b
@TNB-k5b 9 месяцев назад
hey is there something wrong with my code? this is the javascript i have and it just shows 1 line and thats all const state = { grid: Array(6) .fill() .map(() => Array(5).fill(' ')), currentRow: 0, currentCol: 0, }; function updateGrid() { for (let i = 0; i < state.grid.length; i++) { for (let j = 0; j < state.grid[i].length j++) { const box = document.getElementById(`box${i}${j}`); box.textContent = state.grid[i][j]; } } } function drawBox(container, row, col, letter='') { const box = document.createElement('div'); box.className = 'box'; box.id = `box${row}${col}`; box.textContent = letter; container.appendChild(box); return box; } function drawGrid(container) { const grid = document.createElement('div') grid.className = 'grid'; for (let i = 0; i < 6; i++) { for (let j = 0; j < 5; j++) { drawBox(grid, i, j); } } container.appendChild(grid); } function startup() { const game = document.getElementById('game'); drawGrid(game); state.grid: Array(6) .fill() .map(() => Array(5).fill('a')); updateGrid(); } startup();
@DoubleDYouTube
@DoubleDYouTube 9 месяцев назад
When you say "it just shows 1 line", what so you mean exactly? Also, are you using VS Code to check for syntax errors? It seems to me that there's a syntax error in your startup function (state.grid ... ).
@TNB-k5b
@TNB-k5b 9 месяцев назад
@@DoubleDRU-vid would you tell me whats my error please
@TNB-k5b
@TNB-k5b 9 месяцев назад
@@DoubleDRU-vid i mean it just shows 1 row
@DoubleDYouTube
@DoubleDYouTube 9 месяцев назад
@@TNB-k5b I don't know what's the error because I don't have the full context. If you want, you can upload your code to Github and send me a link to check it out.
@OraXFuNmoDz
@OraXFuNmoDz 5 месяцев назад
this may help you out for those with a similar error as i had.
Далее
Build this JS calculator in 15 minutes! 🖩
15:20
Просмотров 500 тыс.
Build a Wordle Clone in JavaScript HTML CSS
36:13
Просмотров 30 тыс.
Я ДОСТРОИЛ ЗАВОД - Satisfactory
19:13
Просмотров 170 тыс.
Коротко о моей жизни:
01:00
Просмотров 301 тыс.
Database Design: Postgres, Prisma, Hono.js
49:28
Making a Game with Java with No Experience
8:41
Просмотров 225 тыс.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 252 тыс.
A flexbox trick to improve text wrapping
5:02
Просмотров 209 тыс.
How To Build A Minesweeper Clone With JavaScript
43:14
It's time for change, it's time for Linux.
10:53
Просмотров 256 тыс.
Making a Game in JavaScript with No Experience
5:49
Просмотров 817 тыс.
Generics: The most intimidating TypeScript feature
18:19
1 hour 2D Breakout in JavaScript!
39:17
Просмотров 8 тыс.
10 CSS Shapes in 10 minutes (Coding timelapse)
10:16