The user page is very similar to the job page. It is composed of a set of HTML input elements and a rich text CKEditor. The structure of the page is as below:

 

<!--views/admin/post.ejs-->
<link rel='stylesheet' href='/styles/admin/user.css' />
<script src="/scripts/ckeditor/ckeditor.js"></script>

<section class="User">
<form action='/admin/user' method='post' >
    <input type='text' name='title' placeholder='ឈ្មោះ​អ្នក​ប្រើប្រាស់' required />
    <textarea name="content" id="editor" ></textarea>
    <div class='wrapper'>
        <input type='text' name='thumb' required placeholder="តំណរ​ភ្ជាប់​រូប​តំណាង" />
        <input type='datetime-local' value='' name='datetime' required />
        <select name='category'>
            <option>Author</option>
            <option>Admin</option>
        </select>
        <input type="email" name="email" required placeholder="Email" />
        <input type="password" name="password" required />
        <input type='submit' value='ចុះ​ផ្សាយ' />
    </div>
</form>
</section>
<script src="/scripts/ckeditor/config.js"></script>

 

/* static/styles/user.css */
.User input, .User select{
    width: 100%;
    font: var(--body-font);
    padding: 2px 10px;
}

.User form .ck-editor__editable{
    min-height: 300px;
    color: black;
}

.User form .wrapper{
    display: grid;
    grid-template-columns: auto auto auto;
}

 

 

GitHub: https://github.com/Sokhavuth/khmerweb-job

Heroku: https://khmerweb-job.herokuapp.com