Okay, so today I messed around with setting up “c.z. guest house”. It wasn’t anything fancy, just something I wanted to try out.
First, I brainstormed what exactly I wanted this “guest house” to be. Was it a literal digital guest book? Or maybe some kind of virtual space? I decided to keep it simple: a basic webpage where people could leave a little note.
Getting Started
- I grabbed my usual text editor. Nothing special, just something to write the code in.
- I started with a basic HTML structure. You know, the usual
<html>,<head>,<body>stuff. - I threw in a title, “c.z. Guest House”, just to make it clear what the page was.
Building the Form
Next up, I needed a way for people to actually leave messages. So, I created a simple form:
- I used the
<form>tag, of course. - I added a text area (
<textarea>) for the message itself. Gave it a nice placeholder like “Leave a message…” - I included a submit button (
<button>). Gotta have a way to send the message, right?
Displaying the Messages
Now, to actually show the messages. This is where I decided how to arrange things:
- I just created the simple div element.
- I set the id to be able to manipulate dom element with javascript.
Making it Work (a little)
I wanted it at least a little interactive, that’s mean I need to add the javascript.
- I add the
<script>tag. - I defined the javascript variable get the dom by id.
- I create function to set message to dom.
It’s super basic, I added a simple javascript to clear the message after submitting, but you get the idea. I could definitely add more to this later – maybe save the messages somewhere, add styling, make it look nicer. But for a quick experiment, it works!
