Renderizado de un proyecto en SolidJS

Reto

HTML

  <div id="app">
    <h1>
      Hola, soy 
      <a href="https://www.twitter.com/SebasLomasLopez" target="_blank" id="name"></a>
    </h1>
    <p>
      Actualmente tengo <span id="age"></span> años
    </p>
    <p id="more">
      Y estoy aprendiendo en platzi
    </p>
  </div>
  <script type="importmap">
    {
      "imports": {
        "solid-js": "./solid.js"
      }
    }
  </script>
  <script src="index.js" type="module"></script>

JS

createEffect(() => {
  // Obtener edad actual

  const currentDate = new Date()
  const currentDay = currentDate.getDate()
  const currentMonth = currentDate.getMonth() + 1
  const currentYear = currentDate.getFullYear()

  const birthDay = 12
  const birthMonth = 12
  const birthYear = 1998
  let birthNextYear = currentYear;

  console.table({currentDay, currentMonth, currentYear})

  let currentAge;


  // Checa si ya cumple años. 
  /*
  Si el mes y dia de actual es mayor o igual al de mi cumpleaños
  entonces el siguiente cumpleaños se celebrara el proximo año
  */
  if(currentDay >= birthDay && currentMonth >= birthMonth) {
    birthNextYear += 1
  } 

  /*
    Si el dia y mes actual son igual o mayor al dia y mes de mi cumpleaños O
    si el siguiente año de mi cumpleaños es mayor al año actual
    entones hace una simple resta.
    Si ninguna condicion es verdad, significa que todavia no cumplo año, asi que tengo la misma
    edad que cumpli mi cumpleaños pasado para eso se resta 1.
  */
  if((currentDay >= birthDay && currentMonth >= birthMonth) || birthNextYear > currentYear) {
    currentAge = currentYear - birthYear
  } else {
    currentAge = (currentYear - 1) - birthYear
  }

  document.querySelector('#age').textContent = currentAge

  console.log(currentAge)
})

Reto:

import { createSignal, createEffect } from "solid";

const defaultProfile = {
    name: "platzinauta",
    link: "https://twitter.com/?lang=es",
    year: new Date().getFullYear()
}

const [profile, setProfile] = createSignal(defaultProfile)


createEffect(()=> {
    console.log("form: ", profile())
    document.querySelector("#name").textContent  = profile().name 
    document.querySelector("#link").setAttribute("href", profile().link)
    const yearNumber = new Date().getFullYear() - Number(profile().year)
    document.querySelector("#year").textContent = yearNumber
})

document.querySelector("#reload").addEventListener("click", (e) => {
    e.preventDefault()
    const name = document.querySelector("#input_name").value
    const link = document.querySelector("#input_link").value
    const year = document.querySelector("#input_year").value
    if (name != "") defaultProfile.name = name
    if (link != "") defaultProfile.link = link
    if (year != "") defaultProfile.year = year
    setProfile(defaultProfile)
})