Build a Wordle Clone in JavaScript HTML CSS

00:36:12
https://www.youtube.com/watch?v=ckjRsPaWHX8

Resumo

TLDRIn this video tutorial, viewers learn to create a web-based game called Wordle using HTML, CSS, and JavaScript. The game allows players to guess a daily word within six attempts, providing feedback through color-coded tiles. The tutorial covers setting up project files, writing HTML for the game structure, styling with CSS, and implementing game logic with JavaScript. Viewers learn to handle user input, display hints, and manage game states, making it beginner-friendly for those learning web development.

Conclusões

  • 🎮 Create a simple web game: Wordle
  • 🛠️ Use HTML, CSS, and JavaScript only
  • 🔍 Provide feedback with color-coded tiles
  • 📝 Handle user input and game logic
  • 📱 Ensure responsiveness for different devices
  • 🔄 Allow six attempts to guess the word
  • 💡 Improve by adding a word database
  • 🔑 Implement a keyboard interface
  • 📊 Manage game states effectively
  • ✅ Make it beginner-friendly for web developers

Linha do tempo

  • 00:00:00 - 00:05:00

    The video introduces a tutorial on creating a popular word-guessing game called Wordle using basic web development technologies: HTML, CSS, and JavaScript. The game involves guessing a daily word within six attempts, with hints provided for incorrect guesses.

  • 00:05:00 - 00:10:00

    The presenter explains the structure of the game, including the use of HTML for content, CSS for styling, and JavaScript for functionality. They create three files: wordo.html, wordo.css, and wordo.js, and outline the roles of each technology in the game development process.

  • 00:10:00 - 00:15:00

    The HTML structure is built, including the head and body sections. The title is set to 'Wordle', and elements such as the game board and answer display are created. The presenter emphasizes the importance of IDs for styling and JavaScript access.

  • 00:15:00 - 00:20:00

    CSS styling is applied to the body, title, and game board. The presenter demonstrates how to center elements and style the game tiles, including colors for correct, present, and absent letters based on user guesses.

  • 00:20:00 - 00:25:00

    The JavaScript section begins with the creation of global variables for game dimensions and the target word. The presenter explains the logic for tracking user input and managing game state, including the current row and column for guesses.

  • 00:25:00 - 00:30:00

    The game board is populated with tiles using a loop, and the presenter discusses the importance of using JavaScript for dynamic content creation. They demonstrate how to create tiles with unique IDs and apply the tile class for styling.

  • 00:30:00 - 00:36:12

    User input handling is implemented, allowing players to type letters, use backspace, and submit guesses. The presenter explains the logic for processing guesses, providing feedback on correct letters, and managing game over conditions.

Mostrar mais

Mapa mental

Vídeo de perguntas e respostas

  • What is the game being created in this tutorial?

    The game is called Wordle.

  • What technologies are used to create the game?

    HTML, CSS, and JavaScript.

  • How many attempts do players have to guess the word?

    Players have six attempts to guess the word.

  • What feedback do players receive for their guesses?

    Players receive color-coded feedback: green for correct letters in the right position, yellow for correct letters in the wrong position, and gray for letters not in the word.

  • Is any external library or framework used?

    No, the game is created using only basic HTML, CSS, and JavaScript.

  • Can the game be played on different devices?

    Yes, the game is designed to scale properly on different devices.

  • What happens if a player runs out of attempts?

    The game reveals the correct word if the player does not guess it within six attempts.

  • How can the game be improved?

    Improvements could include adding a database of words and implementing a keyboard interface.

  • What is the purpose of the tutorial?

    The tutorial aims to teach beginners web development by creating a simple game.

  • What is the final word used in the tutorial for guessing?

    The final word used in the tutorial is 'squid.'

Ver mais resumos de vídeos

Obtenha acesso instantâneo a resumos gratuitos de vídeos do YouTube com tecnologia de IA!
Legendas
en
Rolagem automática:
  • 00:00:00
    hey there hope you're having a wonderful
  • 00:00:02
    day so in this video we're going to
  • 00:00:04
    create a popular game well uh it's
  • 00:00:07
    popular for now uh it's been on the news
  • 00:00:10
    actually and a lot of people seem to
  • 00:00:12
    know about it and that is wordo and so I
  • 00:00:16
    think this is a good game for beginners
  • 00:00:18
    who are uh learning web development so
  • 00:00:22
    basic HTML CSS JavaScript so in this
  • 00:00:25
    video we're going to create this game
  • 00:00:27
    from scratch using just HTML CS says
  • 00:00:30
    JavaScript no libraries no Frameworks
  • 00:00:32
    nothing if you've never played this
  • 00:00:34
    before you can just go on this website
  • 00:00:36
    and basically it's a daily game that
  • 00:00:39
    takes like 2 minutes and uh there's a
  • 00:00:42
    new word each day you have six attempts
  • 00:00:45
    to guess what that new word is every
  • 00:00:47
    time you guess a word uh if you don't
  • 00:00:50
    get it right uh you're given some hints
  • 00:00:53
    you can see that the first guess I put
  • 00:00:55
    in was Apple and there are some gray
  • 00:00:58
    tiles and yellow tiles yellow tiles mean
  • 00:01:00
    that the letter exists in the word but
  • 00:01:02
    it's not in the correct position so
  • 00:01:05
    there's a p and E in here so my second
  • 00:01:08
    guess is press and you can see there's a
  • 00:01:10
    green tile this means that the first
  • 00:01:12
    letter is a p so that's correct and
  • 00:01:14
    there's an RN e that I did not guess the
  • 00:01:17
    correct position of and then you can
  • 00:01:19
    keep guessing and so if I guess print I
  • 00:01:23
    press enter and it will submit my guess
  • 00:01:26
    and you can see that wasn't the right
  • 00:01:28
    guess I can put penny I can also
  • 00:01:31
    backspace right so I'm given six tries
  • 00:01:33
    and after six tries if I don't guess it
  • 00:01:36
    they will tell me what the word is okay
  • 00:01:38
    so we're going to create this game and
  • 00:01:41
    to do that you want to have an editor so
  • 00:01:43
    I'm going to create a new file and I'm
  • 00:01:46
    just going to call it
  • 00:01:48
    wordo
  • 00:01:50
    HTML uh did it create it here no okay
  • 00:01:53
    I'll do it here wo.
  • 00:01:55
    HTML and then I'm going to create
  • 00:01:57
    another one wo. CSS
  • 00:02:00
    and word.
  • 00:02:03
    JS okay so we have these three files and
  • 00:02:07
    basically HTML is all the content on
  • 00:02:10
    this page so it's the title it's this
  • 00:02:13
    little horizontal line these icons the
  • 00:02:16
    tiles the letters so that's HTML CSS is
  • 00:02:20
    basically your styling so adding colors
  • 00:02:23
    so adding this yellow tile this green
  • 00:02:25
    tile this gray one adding the borders
  • 00:02:28
    here this keyboard uh we're not going to
  • 00:02:30
    add the keyboard or these little icons
  • 00:02:33
    because you it's a little too
  • 00:02:34
    complicated um for now we're just going
  • 00:02:36
    to focus on the actual game itself where
  • 00:02:39
    you're guessing the word and being able
  • 00:02:42
    to process user input and then finally
  • 00:02:45
    we have JavaScript so JavaScript is used
  • 00:02:47
    to modify elements on the web page so
  • 00:02:51
    JavaScript allows us to type in you know
  • 00:02:54
    a guess and then we can submit the guess
  • 00:02:56
    so if I press enter a popup appears
  • 00:02:58
    that's JavaScript and it will compare
  • 00:03:01
    your guess with the word that they have
  • 00:03:04
    so that's pretty much it your HTML CSS
  • 00:03:06
    JavaScript okay so after I created my
  • 00:03:08
    files um I can just open up the HTML one
  • 00:03:12
    in my web browser so I just double click
  • 00:03:14
    on this right here and you can see this
  • 00:03:16
    is my uh blank HTML file now let's start
  • 00:03:21
    working on this so
  • 00:03:23
    first we have
  • 00:03:26
    HTML I'm assuming you know a little of
  • 00:03:29
    the basics if not that's okay I'll try
  • 00:03:30
    to make it as um beginner friendly as
  • 00:03:33
    possible and try to explain as much as I
  • 00:03:35
    can so first we have head and we have
  • 00:03:39
    the
  • 00:03:40
    body okay so head is basically this tiny
  • 00:03:44
    stuff so it's your your title right so
  • 00:03:48
    in this case it just has the file name
  • 00:03:49
    we can change it we'll make the title
  • 00:03:53
    Wordle and then we're going to add a
  • 00:03:56
    little uh some other stuff So Meta car
  • 00:04:00
    set is going to be
  • 00:04:02
    utf8 and it's just standard character
  • 00:04:05
    set so we're going to also have meta
  • 00:04:08
    name equals viewport and this will be
  • 00:04:14
    content with equals device withth
  • 00:04:17
    initial scale equal zero user scalable
  • 00:04:23
    no okay so what this basically does is
  • 00:04:27
    it scales your web page so that it
  • 00:04:29
    doesn't look look weird in other devices
  • 00:04:32
    uh so whether using your phone or an
  • 00:04:35
    iPad or your computer it will scale it
  • 00:04:37
    so that you know it will look nice and
  • 00:04:41
    uh we also want to link our CSS in
  • 00:04:43
    JavaScript files so basically just
  • 00:04:46
    link and then uh this is
  • 00:04:50
    stylesheet and our hre is going to be
  • 00:04:54
    word. CSS and in our JavaScript script
  • 00:04:59
    source is going to be wo.
  • 00:05:02
    JS and then we close that tag okay so
  • 00:05:05
    that's it for head and now we have body
  • 00:05:08
    so for our body let's add the title and
  • 00:05:11
    we're going to just put
  • 00:05:13
    word and then if I save this and refresh
  • 00:05:18
    it you can see wordo and we're going to
  • 00:05:20
    style It Center it and change the font
  • 00:05:23
    let's go back here and I'm going to add
  • 00:05:26
    that line that line is basically HR it's
  • 00:05:28
    just that little Thin Line line and I'm
  • 00:05:30
    also going to add a breake line so what
  • 00:05:33
    this basically does is it just adds a
  • 00:05:36
    new line just pushes things down a
  • 00:05:38
    little so it will create this white
  • 00:05:40
    space between this line and this board
  • 00:05:42
    all right so let's go back here and I'm
  • 00:05:45
    going to create the board so div and I'm
  • 00:05:48
    going to set it an ID
  • 00:05:51
    board and I'm going to close that and
  • 00:05:55
    then I'm going to add one more BR and
  • 00:05:57
    then in case the user um or the player
  • 00:06:01
    does not guess correctly we want to show
  • 00:06:03
    them the answer right so I'm going to
  • 00:06:05
    have another
  • 00:06:07
    header and I'm going to set the ID to
  • 00:06:10
    answer and I'm not going to put in
  • 00:06:12
    anything uh we're going to populate this
  • 00:06:14
    later if the user uh does not uh get the
  • 00:06:18
    correct answer and for here I'm just
  • 00:06:21
    going to make the ID title so the I IDs
  • 00:06:24
    are used for uh styling and for
  • 00:06:27
    accessing uh the element in
  • 00:06:30
    JavaScript okay and it's different from
  • 00:06:32
    a class in that ID is it's Unique so
  • 00:06:35
    when I try to get an element with title
  • 00:06:38
    it's always going to be this
  • 00:06:40
    tag and uh yeah all right so that's HTML
  • 00:06:44
    now we have our line and our title all
  • 00:06:47
    right so this looks uh pretty ugly so
  • 00:06:49
    I'm going to style
  • 00:06:53
    it all right so first let's style our
  • 00:06:56
    body so this is everything within our
  • 00:06:59
    web page whatever we put as a style here
  • 00:07:01
    would apply to all the tags in uh the
  • 00:07:04
    body so basically everything inside
  • 00:07:09
    here so I'm just going to change the
  • 00:07:11
    font
  • 00:07:14
    oops and the font is Ariel altica
  • 00:07:20
    sanserif and text align we're going to
  • 00:07:22
    center
  • 00:07:23
    it okay and basically you just copy and
  • 00:07:27
    paste the title World from the website
  • 00:07:29
    and then and put our Microsoft Word or
  • 00:07:32
    uh Google Docs and you can see it's
  • 00:07:33
    Ariel okay so let's go back and let's
  • 00:07:37
    also shorten that line so this HR line
  • 00:07:41
    is very long but we want it to be about
  • 00:07:44
    this length
  • 00:07:46
    so so we're just going to make the width
  • 00:07:49
    uh 500
  • 00:07:51
    pixels and then title so to access the
  • 00:07:54
    ID um that you want to style you use
  • 00:07:57
    this hash and for classes use the dot so
  • 00:08:00
    I'm going to use hash
  • 00:08:02
    title and I'm going to make the font
  • 00:08:04
    size so the font size we saw in
  • 00:08:07
    microsoftw it was 27 but this is not the
  • 00:08:10
    correct uh unit I guess of measurement
  • 00:08:14
    so in Microsoft whereare they use PT we
  • 00:08:18
    want pixels so we put in 27 convert and
  • 00:08:20
    we get 36 so we're going to change this
  • 00:08:24
    to 36
  • 00:08:25
    pixels and we're going to make it bold
  • 00:08:28
    so font weight bold
  • 00:08:30
    letter
  • 00:08:31
    spacing and make it 2 PX or two pixels
  • 00:08:35
    so letter spacing basically adds spacing
  • 00:08:39
    between the letters so they're not
  • 00:08:40
    scrunched up together all right and then
  • 00:08:44
    let's have our board so for now you
  • 00:08:46
    won't be able to see the board because
  • 00:08:48
    we didn't really populate it yet but I
  • 00:08:50
    I'll add the colors so I'm going to set
  • 00:08:53
    the width to 350 PX height to
  • 00:08:56
    420 and I'm going to set the back
  • 00:08:59
    background color let's make it green for
  • 00:09:01
    now and if I go back and refresh this
  • 00:09:04
    you can see I have my board here this is
  • 00:09:07
    where we'll put our tiles and we have
  • 00:09:11
    our nicely centered title and shortened
  • 00:09:14
    line here
  • 00:09:17
    so now uh let's Center the board so I'm
  • 00:09:22
    going to do margin zero
  • 00:09:25
    Auto margin top I'm going to push the
  • 00:09:28
    board down a little bit
  • 00:09:30
    by three pixels and then display flex
  • 00:09:33
    and flex wrap
  • 00:09:36
    wrap all right so display Flex what this
  • 00:09:39
    does is if we go back here if you notice
  • 00:09:43
    we have this uh board which is 5X 6 or
  • 00:09:47
    6x5 and what that Flex is going to do is
  • 00:09:50
    going to keep our tile elements within
  • 00:09:53
    that board okay within that box so for
  • 00:09:57
    tile we're going to have a tile class
  • 00:09:59
    that we're going to create uh I guess 30
  • 00:10:02
    of so we're going to have tile right
  • 00:10:06
    because it's a class and we're going to
  • 00:10:08
    make the well let's start with the
  • 00:10:13
    box so the border right so each each uh
  • 00:10:19
    box starts with a border this gray
  • 00:10:22
    border so just going to add that it's
  • 00:10:25
    going to be 2
  • 00:10:26
    PX two pixels solid and let's make it
  • 00:10:30
    light
  • 00:10:31
    gray and then I'm going to make the
  • 00:10:33
    width 60 pixels and the height 60
  • 00:10:38
    pixels and we want some space in between
  • 00:10:41
    the boxes so we're going to use
  • 00:10:43
    margin and let's set the space between
  • 00:10:47
    each box by 2.5 pixels but because it
  • 00:10:51
    applies to each tile it's going to be
  • 00:10:54
    2.5 pixels away from one tile and next
  • 00:10:57
    to that tile is going to be another 2.5
  • 00:10:59
    pixels away so in total there's going to
  • 00:11:01
    be five pixels in between uh two tiles
  • 00:11:05
    and then now uh let's add some styling
  • 00:11:07
    for the text so we want to style the
  • 00:11:10
    text and we want to center it change the
  • 00:11:13
    font so let's do
  • 00:11:16
    that so let's see text and I'm going to
  • 00:11:20
    make the color black to begin with and
  • 00:11:24
    font size will be the same as the title
  • 00:11:26
    36 pixels font weight will be both
  • 00:11:31
    old and then display Flex again keep in
  • 00:11:34
    the box and justify content
  • 00:11:39
    Center and align items
  • 00:11:42
    Center so justify with Center it I think
  • 00:11:46
    horizontally or vertically I forgot
  • 00:11:48
    which one but you need both of them so
  • 00:11:50
    one of them censers it horizontally and
  • 00:11:52
    the other censers it uh vertically all
  • 00:11:55
    right so we got that down and then now
  • 00:11:58
    we have
  • 00:11:59
    three more things to add and that is
  • 00:12:02
    changing the color based on the hints
  • 00:12:04
    right so we have uh
  • 00:12:08
    correct we have uh present and then we
  • 00:12:12
    have
  • 00:12:15
    absent okay so for correct we want to
  • 00:12:18
    change the color to Green so background
  • 00:12:22
    color uh so I already went ahead and
  • 00:12:25
    figured out which colors correspond to
  • 00:12:27
    which uh hint type
  • 00:12:29
    so 6 a a
  • 00:12:33
    a64 this should be the
  • 00:12:35
    green and then we're going to change a
  • 00:12:37
    font color to white and make the Border
  • 00:12:40
    color white as well so that uh since our
  • 00:12:44
    background is white it's just going to
  • 00:12:45
    hide the Border uh if we made the Border
  • 00:12:48
    if we took away the Border it's going to
  • 00:12:50
    make the size of the tiles smaller but
  • 00:12:51
    we don't want to do that we just want to
  • 00:12:53
    uh hide the border so we're going to
  • 00:12:55
    make it white so it Blends in with the
  • 00:12:57
    background and let's do the same for for
  • 00:12:59
    our present so that's yellow so
  • 00:13:01
    background color so it's going to be
  • 00:13:06
    c9b
  • 00:13:09
    458 and the color will be White and The
  • 00:13:12
    Border color will also be
  • 00:13:15
    white all right and then we have the
  • 00:13:17
    last one absent and this is a dark
  • 00:13:20
    grayish color 787
  • 00:13:25
    c7e same thing color white
  • 00:13:29
    border color
  • 00:13:33
    white okay so our CSS is done let's go
  • 00:13:36
    back and refresh so you can see so far
  • 00:13:39
    we just centered this now we're going to
  • 00:13:41
    use JavaScript to populate the tiles for
  • 00:13:44
    you uh for the player to guess all right
  • 00:13:47
    so before we continue let's talk about
  • 00:13:49
    how we might design this so I have paint
  • 00:13:52
    here and basically uh you have this uh
  • 00:13:55
    board right so you have five columns and
  • 00:13:59
    six rows so each column represents the
  • 00:14:03
    current position for the letters of the
  • 00:14:05
    word that you're guessing and the rows
  • 00:14:07
    represent um how many attempts you're
  • 00:14:09
    allowed right so the columns basically
  • 00:14:12
    represent the length of the word so you
  • 00:14:14
    have five columns and you have six
  • 00:14:16
    guesses and so what we're going to do is
  • 00:14:19
    we're going to
  • 00:14:20
    create um 30 tiles and we're going to
  • 00:14:23
    give each one an ID so in this case
  • 00:14:26
    because this one uh is a index 0 0 we're
  • 00:14:30
    going to make this ID something like
  • 00:14:32
    0-0 and then over here like this L this
  • 00:14:36
    would be
  • 00:14:37
    0-3 this e over here would be 1-2 and so
  • 00:14:41
    on so each ID will correspond to its row
  • 00:14:44
    column
  • 00:14:46
    indices all right so let's add some
  • 00:14:48
    Global variables so we have our height
  • 00:14:50
    and that's going to be six so we said
  • 00:14:53
    this is the number of
  • 00:14:55
    guesses and then we have our width so
  • 00:14:57
    this going to be five it's going to be
  • 00:15:00
    length of the word and the reason I am
  • 00:15:02
    using variables is because you can
  • 00:15:04
    change these however you like you can
  • 00:15:07
    reduce the number of guesses or add more
  • 00:15:09
    or you can change the length of the word
  • 00:15:11
    so we're just going to keep it
  • 00:15:12
    consistent with what wordo has and just
  • 00:15:14
    make uh six guesses and five letters for
  • 00:15:18
    the
  • 00:15:19
    word okay so we're going to have row
  • 00:15:22
    equals z and column equal Zer uh this is
  • 00:15:26
    the player's current uh guessing
  • 00:15:28
    position currently after two guesses the
  • 00:15:31
    user or the player is here right so the
  • 00:15:34
    row is two and the column is zero and if
  • 00:15:36
    they guess let's say a the user would
  • 00:15:39
    now be here right so we bump up column
  • 00:15:41
    to one and then as the user keeps
  • 00:15:44
    guessing and submits their guas we
  • 00:15:47
    increment row by one so now row is three
  • 00:15:49
    and column is back to zero again this is
  • 00:15:52
    the current guess or attempt
  • 00:15:57
    number and
  • 00:16:00
    Uh current letter for that attempt okay
  • 00:16:04
    whenever you play games you want to have
  • 00:16:06
    a bull for game over so we're going to
  • 00:16:08
    set that to
  • 00:16:09
    false and the word uh let's just make it
  • 00:16:13
    uh squid okay so that's the word that
  • 00:16:17
    they'll be guessing um you could have an
  • 00:16:19
    array of words uh something like
  • 00:16:23
    words and put squid or apple and then
  • 00:16:28
    you could you know have your word be
  • 00:16:32
    completely random so maybe index one or
  • 00:16:36
    zero or just uh use math to uh get a
  • 00:16:39
    random index but I'm just going to keep
  • 00:16:41
    it simple we're just going to use the
  • 00:16:43
    same word throughout this uh tutorial so
  • 00:16:46
    when our page loads we want to call a
  • 00:16:48
    function so we're going to do window
  • 00:16:49
    onload uh it's pretty self-explanatory
  • 00:16:53
    uh when your page
  • 00:16:54
    loads call this function and we're going
  • 00:16:57
    to uh create an initialize function so
  • 00:17:01
    we're going to call
  • 00:17:02
    initialize and here we'll Define
  • 00:17:04
    initialize and basically this
  • 00:17:07
    will create our tiles and uh create some
  • 00:17:12
    event listeners and whatnot for our uh
  • 00:17:16
    game so oops forgot the e here okay so
  • 00:17:19
    let's create the
  • 00:17:22
    board which is basically your tiles your
  • 00:17:25
    six uh attempts so
  • 00:17:29
    we're going to do for Ral z r less than
  • 00:17:33
    height
  • 00:17:35
    r++ and then let C equals
  • 00:17:39
    zero C less than WID
  • 00:17:43
    C++
  • 00:17:44
    C++ and we're going to create a new uh
  • 00:17:48
    HTML element so we're going to say let
  • 00:17:51
    tile equal to document do uh create
  • 00:17:56
    element and we're going to make a span
  • 00:17:58
    so it's it's similar to a paragraph tag
  • 00:18:01
    except that it doesn't end with a new
  • 00:18:03
    line so so with span you can put tiles
  • 00:18:07
    next to each other instead of right
  • 00:18:09
    below each other let's modify some
  • 00:18:11
    Fields so tile. ID is going to be R2
  • 00:18:17
    string and we're just going
  • 00:18:19
    to make the ID like this so we're going
  • 00:18:24
    to do R2
  • 00:18:27
    string Plus the dash and c.2
  • 00:18:31
    string
  • 00:18:33
    okay and then we're going to add the
  • 00:18:36
    class list to the class list um the tile
  • 00:18:40
    class right so what that does is it's
  • 00:18:44
    going to add this class with all this
  • 00:18:47
    styling so basically when you create uh
  • 00:18:50
    an element like this you're basically
  • 00:18:52
    creating a
  • 00:18:55
    span like this and then second line adds
  • 00:18:59
    the ID to it so it'll be 0 0 for the
  • 00:19:02
    first one and then the class will have
  • 00:19:05
    tile and let's make the inner
  • 00:19:09
    text uh let's put uh P for now and then
  • 00:19:14
    finally let's do document. getet element
  • 00:19:17
    by ID our
  • 00:19:21
    board and we're going
  • 00:19:23
    to append child
  • 00:19:27
    oops child
  • 00:19:30
    right so we have our inner text it's
  • 00:19:31
    going to put the P here uh our code is
  • 00:19:34
    going to find the board right by ID and
  • 00:19:37
    insert this document or this HTML tag
  • 00:19:41
    inside that div so it's going to do this
  • 00:19:45
    and then it's going to create another
  • 00:19:46
    one in the next for Loop and then
  • 00:19:48
    another one so you can kind of see why
  • 00:19:51
    we use JavaScript because we can use for
  • 00:19:53
    Loops otherwise I would have to copy and
  • 00:19:54
    paste this uh 30 times so that's that's
  • 00:19:59
    uh tedious to do so after that let's
  • 00:20:02
    save and see uh our
  • 00:20:06
    changes uh oh yeah let's undo that
  • 00:20:09
    background color where is it
  • 00:20:13
    here
  • 00:20:15
    okay uh something's wrong let's see what
  • 00:20:18
    happened console tell that class list is
  • 00:20:22
    not a function what happened here let's
  • 00:20:25
    see to. classist do aend
  • 00:20:29
    oops or add I think it's add should be
  • 00:20:33
    add okay so let's go back
  • 00:20:36
    check um what happened
  • 00:20:39
    here is not a
  • 00:20:42
    function I think I had an S
  • 00:20:45
    somewhere element by
  • 00:20:48
    ID okay there you go here's our
  • 00:20:52
    tile all right so we have our six uh six
  • 00:20:57
    rows and for each row we have five
  • 00:20:59
    letters that the user can guess and as
  • 00:21:01
    you can see that everything is nice and
  • 00:21:03
    centered so let me show you what happens
  • 00:21:06
    if we did not have some parts of our
  • 00:21:08
    styling so for instance in our board if
  • 00:21:11
    I did not have this display Flex to keep
  • 00:21:14
    the tiles within the Box the board box
  • 00:21:18
    let's see and it'll be like this a
  • 00:21:20
    single column of 30
  • 00:21:24
    tiles and in our tiles if I did not have
  • 00:21:27
    justify content
  • 00:21:29
    Center you can see p is centered
  • 00:21:33
    vertically but not horizontally so it's
  • 00:21:35
    over here when it should be a little to
  • 00:21:37
    the
  • 00:21:39
    right and if I coment out align items
  • 00:21:44
    you can see that it is centered
  • 00:21:46
    horizontally but not vertically so we
  • 00:21:48
    need both of them so that it centers
  • 00:21:52
    horizontally and
  • 00:21:54
    vertically okay so let's go back to our
  • 00:21:57
    code
  • 00:22:00
    and let's make this an empty string
  • 00:22:04
    so there you go now let's add our logic
  • 00:22:08
    so we're going to process user input so
  • 00:22:12
    listen for key
  • 00:22:15
    press and we have document. getet or add
  • 00:22:19
    event
  • 00:22:21
    listener key up so we're using key up
  • 00:22:25
    basically um when you're typing into
  • 00:22:27
    wordo when you put your finger down on a
  • 00:22:30
    we want to wait till the player lifts
  • 00:22:33
    their finger up and that's when we
  • 00:22:35
    register the key that they pressed
  • 00:22:37
    because if we did key down then the user
  • 00:22:40
    can just hold down the key and then put
  • 00:22:42
    in 5 A's without lifting up a finger so
  • 00:22:45
    that's why we use key up we're going to
  • 00:22:47
    use um an arrow function here
  • 00:22:53
    oops and if you don't know what an arrow
  • 00:22:55
    function is it's basically this is the
  • 00:22:57
    parameter e which is the key event and
  • 00:23:00
    you have this Arrow which is why it's
  • 00:23:02
    called an arrow function and then you
  • 00:23:03
    have your uh curly braces and in here
  • 00:23:06
    you put everything you want in your
  • 00:23:07
    function so first things uh first uh if
  • 00:23:11
    game
  • 00:23:12
    over basically if it's game over you
  • 00:23:15
    just
  • 00:23:16
    return right so this is going to make
  • 00:23:20
    the page uh constantly listen uh for key
  • 00:23:23
    uh for key presses and so the user can
  • 00:23:27
    just type in Keys you don't want that to
  • 00:23:29
    happen after they used up all all of
  • 00:23:31
    their guesses or if they you know got
  • 00:23:34
    the word correctly you shouldn't process
  • 00:23:37
    the inputs anymore right so that would
  • 00:23:38
    be game over so why don't I show you um
  • 00:23:43
    by using alert I'll do alert uh e. code
  • 00:23:47
    this will tell us what key was pressed
  • 00:23:49
    right so e. code so if I refresh this
  • 00:23:53
    you can see F5 was pressed if I type in
  • 00:23:56
    a you can see key a was pressed rest I
  • 00:23:59
    put backspace
  • 00:24:01
    backspace
  • 00:24:03
    enter uh
  • 00:24:05
    p k so that's how you can uh figure out
  • 00:24:10
    what key was pressed so let's comment
  • 00:24:12
    that
  • 00:24:13
    out all right so first we only allow uh
  • 00:24:17
    certain keys to be pressed so A to Z the
  • 00:24:21
    backspace and enter nothing else is
  • 00:24:24
    allowed so to check to see if the user
  • 00:24:28
    uh press an alphabet key we will use an
  • 00:24:30
    if statement and we'll say key a as you
  • 00:24:33
    saw before when I pressed a the code was
  • 00:24:35
    ke not a but uh key a so key less than
  • 00:24:42
    or equal to e. code and e. code is less
  • 00:24:45
    than or equal to
  • 00:24:47
    keyz so this less than or equal to this
  • 00:24:51
    comparison is you're basically comparing
  • 00:24:53
    the dictionary order right so if I put
  • 00:24:56
    in like if I press a one or two or
  • 00:24:59
    backspace uh they're not within the
  • 00:25:01
    range of ke and keyz in you know lexical
  • 00:25:06
    order uh within here I will check if
  • 00:25:09
    column or the column that the user is
  • 00:25:12
    currently uh inputting a letter into we
  • 00:25:16
    need to check to see if it's less than
  • 00:25:19
    uh five right because the indices go
  • 00:25:22
    from 0 to four so if they are on let's
  • 00:25:26
    say this column
  • 00:25:29
    then that is less than the width which
  • 00:25:31
    is five
  • 00:25:33
    right so if they're on this column they
  • 00:25:35
    can still guess this one this one and
  • 00:25:38
    then after they guess this one we
  • 00:25:40
    increment them to be on uh column five
  • 00:25:43
    which is just temporary to say that oh
  • 00:25:46
    uh you've input all five characters you
  • 00:25:48
    can press enter now if they don't uh put
  • 00:25:51
    in all five characters putting enter
  • 00:25:53
    does nothing all right so if column is
  • 00:25:55
    less than the width we're going to
  • 00:25:59
    uh we're going to check again to make
  • 00:26:00
    sure that the character at that tile is
  • 00:26:04
    blank so that uh they just going on to
  • 00:26:06
    the next one or they're pressing enter
  • 00:26:08
    but they're not overwriting it so
  • 00:26:11
    current
  • 00:26:12
    tile or actually let's get the current
  • 00:26:15
    tile first so let current
  • 00:26:19
    tile go to be document. getet element by
  • 00:26:23
    ID and it's going to be uh let's see row
  • 00:26:28
    do to string plus the
  • 00:26:31
    dash plus call. to
  • 00:26:37
    string and then if C
  • 00:26:40
    tile.
  • 00:26:43
    inext is an empty string so it hasn't
  • 00:26:46
    been filled we're going to update it so
  • 00:26:50
    c.in text is going to be e. code and
  • 00:26:54
    we're going to take uh index 3 right
  • 00:26:57
    because it returns
  • 00:26:59
    uh four character string key a key B Key
  • 00:27:02
    C we just want the letter so we don't
  • 00:27:05
    want the word key just we just want the
  • 00:27:07
    letter and then we're going to increment
  • 00:27:10
    column by one okay so let's save and
  • 00:27:14
    let's go back now I can type some stuff
  • 00:27:16
    in a p e and that's it right I'm stuck
  • 00:27:22
    uh stuck at five I can't type anymore I
  • 00:27:24
    can press enter and it should you know
  • 00:27:26
    give me the results but we have an
  • 00:27:27
    implement
  • 00:27:29
    today now if the key press was not a
  • 00:27:32
    letter key maybe it's backspace so we'll
  • 00:27:35
    do else
  • 00:27:37
    if e. code is equal to backspace in this
  • 00:27:43
    case uh it's pretty
  • 00:27:45
    straightforward um if
  • 00:27:48
    Z call call and width so if the column
  • 00:27:55
    uh that the user is currently on is
  • 00:27:56
    between one and uh the width five then
  • 00:28:01
    they can press back so zero does not
  • 00:28:03
    count because uh if you're on zero that
  • 00:28:05
    means you haven't uh started adding
  • 00:28:08
    letters for that row you can only go
  • 00:28:09
    back if you are within this area right
  • 00:28:13
    so if you put in like CDE e f g then
  • 00:28:19
    currently you're on a column five which
  • 00:28:22
    is not a valid index then you can
  • 00:28:25
    backspace and go back here backspace
  • 00:28:28
    backspace backspace backspace and when
  • 00:28:31
    you're on zero you can't backspace
  • 00:28:33
    because there's nothing to backspace to
  • 00:28:35
    okay so over here we're going to say if
  • 00:28:40
    uh backspace was pressed we're going
  • 00:28:43
    to do call minus equal
  • 00:28:47
    1 and then we're going to get the
  • 00:28:50
    tile right because we did minus equal 1
  • 00:28:53
    we need to get that updated ID so we're
  • 00:28:56
    going to get copy this code
  • 00:29:00
    and we're going to set it
  • 00:29:02
    to uh set the inner text to A blank
  • 00:29:08
    string okay so let's go back and try it
  • 00:29:13
    out so I'm going to say AP I can
  • 00:29:16
    backspace backspace backspace and that's
  • 00:29:18
    it I can do
  • 00:29:20
    APLE backspace backspace okay so that's
  • 00:29:24
    nice now we just need to hit enter and
  • 00:29:28
    have the game tell me some hints or tell
  • 00:29:31
    me whether I got the word or
  • 00:29:33
    not
  • 00:29:36
    so what we're going to do is else if e.
  • 00:29:40
    code is equal to
  • 00:29:43
    enter we're going to call an update
  • 00:29:46
    function that will oh what is that nope
  • 00:29:50
    we're going to call an update function
  • 00:29:52
    oh now come on
  • 00:29:56
    update function
  • 00:29:59
    and we're going to increment the row by
  • 00:30:02
    one right so basically you use up your
  • 00:30:05
    attempt for this one go on to the next
  • 00:30:08
    attempt and set the column to zero start
  • 00:30:12
    new
  • 00:30:13
    row start at zero for new row and then
  • 00:30:18
    so before I write my update function I
  • 00:30:20
    also want to do one more check here and
  • 00:30:22
    that is if not game
  • 00:30:26
    over and row is equal to
  • 00:30:30
    height that basically means you used up
  • 00:30:32
    all your attempts if the row is equal to
  • 00:30:34
    height that means you used up all six
  • 00:30:35
    attempts we're going to say game over is
  • 00:30:38
    equal to
  • 00:30:39
    true and then we're going to reveal the
  • 00:30:43
    answer in here so we're going to
  • 00:30:45
    populate this okay so document. getet
  • 00:30:49
    element by ID
  • 00:30:51
    answer and we're going to set the inner
  • 00:30:54
    text to
  • 00:30:56
    word okay let's write our update
  • 00:31:01
    function so in our update function we
  • 00:31:03
    want to count the number of letters we
  • 00:31:06
    get correct so we're going to set that
  • 00:31:09
    to zero so first we're going to iterate
  • 00:31:11
    through the letters of the word that the
  • 00:31:14
    player guessed so for let c = z c is
  • 00:31:20
    less than width
  • 00:31:23
    C++ we're going to get that tile so it's
  • 00:31:27
    this
  • 00:31:29
    so let's just copy and paste
  • 00:31:32
    this and we're going to say letter is
  • 00:31:36
    going to be C tile.
  • 00:31:40
    interex and then so
  • 00:31:45
    if uh if the letter or actually let's
  • 00:31:50
    phrase it as a question is it in the
  • 00:31:53
    correct
  • 00:31:55
    position so if word at index C is equal
  • 00:32:00
    to the
  • 00:32:01
    letter then we're going to say tile.
  • 00:32:04
    class list.
  • 00:32:06
    add correct so it's going to apply that
  • 00:32:09
    styling with the green
  • 00:32:12
    background and we're going to increment
  • 00:32:14
    correct by
  • 00:32:16
    one now if it's not in the correct
  • 00:32:18
    position we'll ask is it in the word
  • 00:32:22
    then so else if word. includes letter
  • 00:32:29
    and then we're going to say tile. class
  • 00:32:31
    list.
  • 00:32:33
    add
  • 00:32:36
    present and then finally not in the word
  • 00:32:40
    so we're we're just going to say else
  • 00:32:44
    tile. class list. add absent okay and
  • 00:32:50
    finally we also want to update game over
  • 00:32:52
    in case the user happens to guess it
  • 00:32:55
    before this condition where row equals
  • 00:32:57
    height before they uh use up all their
  • 00:33:00
    attempts so another way for game over to
  • 00:33:03
    happen is when they they guess it
  • 00:33:04
    correctly so if correct is equal to the
  • 00:33:10
    width then game
  • 00:33:12
    over is
  • 00:33:15
    true all right and I think that's it for
  • 00:33:19
    the implementation if we refresh we can
  • 00:33:22
    put
  • 00:33:24
    Apple uh okay so there's a bug somewhere
  • 00:33:27
    see
  • 00:33:29
    inspect cannot read inner text so line
  • 00:33:33
    74 Aero current tile.in text ah this
  • 00:33:38
    should be instead of column or call it
  • 00:33:41
    should be
  • 00:33:42
    C all right so let's change that to C
  • 00:33:47
    and let's see if that worked so let's
  • 00:33:50
    refresh and I put in
  • 00:33:53
    apple um oh I guess guess didn't work
  • 00:33:57
    let's see what happened
  • 00:34:00
    here uh tile is not defined yeah you got
  • 00:34:04
    to be careful with these
  • 00:34:06
    namings you got to be careful with the
  • 00:34:09
    variable names so s tile we're going to
  • 00:34:12
    put Cur
  • 00:34:14
    tile and CTI
  • 00:34:17
    here okay so that should be it let's
  • 00:34:21
    refresh I'm going to put Apple you can
  • 00:34:24
    see there are no uh letters in apple
  • 00:34:27
    that appearance squid so I'm going to
  • 00:34:28
    put uh Tower none okay Queen we have two
  • 00:34:34
    Q so q and u exist in the word but
  • 00:34:37
    they're not in the right position so
  • 00:34:39
    let's try Squat and you can see SQ and U
  • 00:34:42
    are in the right position
  • 00:34:44
    so uh we can also write yeah let's just
  • 00:34:48
    Solve IT squid okay so that's pretty
  • 00:34:51
    much wordo and I can you know put in
  • 00:34:54
    other words too actually I didn't do a
  • 00:34:56
    check to make sure that it's valid word
  • 00:34:58
    so maybe that's a feature that you can
  • 00:35:01
    Implement so I can just do this just
  • 00:35:06
    random and you can see squid is revealed
  • 00:35:09
    to me at the end okay so some things you
  • 00:35:12
    can do to improve is add a database of
  • 00:35:15
    words you can make a long array of words
  • 00:35:18
    um you can also add that keyboard from
  • 00:35:20
    wo if you
  • 00:35:22
    want there's also one more thing and
  • 00:35:24
    that is the highlighting issue so if I
  • 00:35:26
    put in five s's in wordo only one of the
  • 00:35:30
    s's should be highlighted because only
  • 00:35:33
    one exists in the word squid but this
  • 00:35:36
    implies somehow that there are five s's
  • 00:35:39
    which uh so this is uh something that
  • 00:35:42
    maybe you might want to fix and uh yeah
  • 00:35:45
    that's it for this tutorial and if you
  • 00:35:47
    found this tutorial helpful and you
  • 00:35:49
    learned a lot please leave a like if you
  • 00:35:51
    have any questions or comments uh leave
  • 00:35:54
    them down below and I'll take a look and
  • 00:35:57
    if you you you know if you decide to
  • 00:35:59
    take this code and continue working on
  • 00:36:02
    this clone of wo uh please do let me
  • 00:36:05
    know I would like to see it and uh yeah
  • 00:36:07
    that's pretty much it for this tutorial
  • 00:36:09
    and hope you have a good one bye-bye
Etiquetas
  • Wordle
  • HTML
  • CSS
  • JavaScript
  • Web Development
  • Game Development
  • Tutorial
  • Beginner
  • User Input
  • Color Coding